一、复选框的基本使用
1、HTML复选框是一种常见的表单控件，用于允许用户从多个选项中进行选择。
<input type="checkbox" name="option1" value="Option 1">Option 1<br> <input type="checkbox" name="option2" value="Option 2">Option 2<br> <input type="checkbox" name="option3" value="Option 3">Option 3
2、上述代码演示了基本的复选框用法，其中type属性为checkbox表示该控件为复选框，name属性为该选项的名称，value属性为该选项的值，用户所选的值会传递到服务器端。
3、当用户勾选复选框时，该复选框所代表的值将会在form表单中被提交到服务器端，而勾选多个复选框时，服务器端将会接收到多个值。
二、复选框的属性
1、除了上述的name和value属性之外，复选框还有其他的属性，如checked、disabled、readonly等。
2、其中checked属性表示复选框默认是否被选中，可以设置为checked或不设置；disabled属性表示复选框是否禁用，可以设置为disabled或不设置；readonly表示复选框是否只读，即用户选择之后不可修改，可以设置为readonly或不设置。
<input type="checkbox" name="option1" value="Option 1" checked>Option 1（默认选中）<br> <input type="checkbox" name="option2" value="Option 2" disabled>Option 2（禁用状态）<br> <input type="checkbox" name="option3" value="Option 3" readonly>Option 3（只读状态）
3、上述代码演示了常见的几种复选框属性的用法。
三、全选、反选
1、在一些情况下，可能需要实现全选、反选的功能，这时可以在复选框中添加相应的JavaScript代码。
2、下面是一个全选、反选的例子，在代码中的selectAll和unSelectAll是JavaScript函数名，确认函数名没有冲突。
<head>
<script>
function selectAll(){ //全选
var checkb=document.getElementsByName(\"myCheckbox\");
for(var i=0;i<checkb.length;i++){
checkb[i].checked=true;
}
}
function unSelectAll(){ //反选
var checkb=document.getElementsByName(\"myCheckbox\");
for(var i=0;i<checkb.length;i++){
checkb[i].checked=!checkb[i].checked;
}
}
</script>
</head>
<body>
<input type=\"checkbox\" name=\"myCheckbox\" value=\"checkbox1\">1<br>
<input type=\"checkbox\" name=\"myCheckbox\" value=\"checkbox2\">2<br>
<input type=\"checkbox\" name=\"myCheckbox\" value=\"checkbox3\">3<br>
<button onclick=\"selectAll()\">全选</button>
<button onclick=\"unSelectAll()\">反选</button>
</body>
四、其他应用
1、除了单纯的选择功能，复选框还可以用来实现其他有趣的功能，如图片的多选。
2、以下代码演示了如何使用复选框实现图片的多选功能。
<head>
<script>
function showChecked(){
var result=\"\";
var checkb=document.getElementsByName(\"myImage\");
for(var i=0;i<checkb.length;i++){
if(checkb[i].checked==true){
result+=checkb[i].value+\", \";
}
}
document.getElementById(\"result\").innerHTML=result;
}
</script>
</head>
<body>
<img src=\"image1.jpg\">
<input type=\"checkbox\" name=\"myImage\" value=\"image1.jpg\"><br>
<img src=\"image2.jpg\">
<input type=\"checkbox\" name=\"myImage\" value=\"image2.jpg\"><br>
<img src=\"image3.jpg\">
<input type=\"checkbox\" name=\"myImage\" value=\"image3.jpg\"><br>
<button onclick=\"showChecked()\">确认选择</button>
<div id=\"result\"></div>
</body>
3、上述代码中，当用户选择了图片之后，点击确认选择按钮，所选的图片名称将会显示在页面的result处。
五、总结
本文通过介绍复选框的基本用法、属性、全选、反选以及其他应用，详细阐述了如何使用HTML复选框在网页中实现多选功能。希望对读者有所帮助。
