abstract： <div class='selectoption'> <div class='checkall'> <input type="checkbox" id="checkall" onclick="checkall(this)"><label for="
<div class='selectoption'>
<div class='checkall'>
<input type="checkbox" id="checkall" onclick="checkall(this)"><label for="checkall">全选</label>
</div>
<ul>
<li class='first_li'><input type="checkbox" name="item" id='item[0]'><label for="item[0]">选项1</label></li>
<li><input type="checkbox" name="item" id='item[1]'><label for="item[1]">选项2</label></li>
<li><input type="checkbox" name="item" id='item[2]'><label for="item[2]">选项3</label></li>
<li><input type="checkbox" name="item" id='item[3]'><label for="item[3]">选项4</label></li>
<li><input type="checkbox" name="item" id='item[4]'><label for="item[4]">选项5</label></li>
<li><input type="checkbox" name="item" id='item[5]'><label for="item[5]">选项6</label></li>
<li><input type="checkbox" name="item" id='item[6]'><label for="item[6]">选项7</label></li>
<li><input type="checkbox" name="item" id='item[7]'><label for="item[7]">选项8</label></li>
</ul>
</div>
//2、CSS
.selectoption{
width: 120px;
margin:0 auto;
border:1px solid #ccc;
border-radius: 10px;
padding: 0 10px;
}
.selectoption .checkall{
border-bottom: 1px solid #000;
padding:10px 0;
}
.selectoption ul li{
padding-bottom:3px;
}
.selectoption ul li.first_li{
padding-top:7px;
}
//3.javascript如下
//全选框作业
function checkall(){
$ItemArr = document.getElementsByName('item');
for (var i = 0;i<= $ItemArr.length - 1;i++) {
if (document.getElementById('checkall').checked) {
$ItemArr[i].checked = true;
}else{
$ItemArr[i].checked = false;
};
};
};
//效果图：
//总结：获取【全选】控件的句柄，然后通过点击事件触发函数，再通过document.getElementById('checkall').checked获取其选中状态，document.getElementsByName以数组形式循环返回item子选项的句柄，最后根据【全选】的选中状态来循环改变item子选项的选中状态。个人建议尽量少用<br>，所以我使用ul标签将子选项以li容器标签存放，实现块元素效果。
Correcting teacher：西门大官人Correction time：2019-04-20 13:26:41
Teacher's summary：如果学习过jquery，可以用jquery更方便的实现全选功能