html中复选框如何实现代码

HTML中复选框是用来实现多选的功能的，可以在页面上同时选择多个选项。下面是复选框的HTML代码：

<input type="checkBox" name="check" value="1">选项1
<input type="checkBox" name="check" value="2">选项2
<input type="checkBox" name="check" value="3">选项3

复选框的基本语法非常简单，只需要设置input的type为checkBox即可。name属性用来区分不同的复选框，value属性则表示该选项的值。在以上代码中，所有复选框的name属性都设置为"check"，这样在提交表单时，可以用相同的名称将所选中的值一起传递到后台。

如果要让某个复选框默认为选中状态，只需要在input标签中添加checked属性即可，例如：

<input type="checkBox" name="check" value="1" checked>选项1

此外，通过CSS的样式设置，还可以美化复选框的外观，例如图标样式、背景颜色等。

input[type="checkBox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #8C8C8C;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fff;
    Box-shadow: 0 0 0 0 rgba(1,1,0.2);
}
input[type="checkBox"]:hover {
    background-color: #E8E8E8;
}
input[type="checkBox"]:checked {
    background-color: #4CAF50;
    border-color: #4CAF50;
    Box-shadow: 0 0 0 4px rgba(76,175,80,0.6);
}

在以上CSS样式中，设置了复选框的宽度、高度、圆角、边框颜色等样式，并利用:hover和:checked等伪类实现了鼠标移入和选中复选框时的样式响应。

总的来说，HTML中的复选框非常灵活、方便，可以应用在许多场景中，帮助用户快速选取、操作多个选项。