????： <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如下
//全選框作業(yè)
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;
};
};
};
//效果圖：
//總結(jié)：獲取【全選】控件的句柄，然后通過點擊事件觸發(fā)函數(shù)，再通過document.getElementById('checkall').checked獲取其選中狀態(tài)，document.getElementsByName以數(shù)組形式循環(huán)返回item子選項的句柄，最后根據(jù)【全選】的選中狀態(tài)來循環(huán)改變item子選項的選中狀態(tài)。個人建議盡量少用<br>，所以我使用ul標簽將子選項以li容器標簽存放，實現(xiàn)塊元素效果。
?? ???：西門大官人?? ??：2019-04-20 13:26:41
???? ??：如果學習過jquery，可以用jquery更方便的實現(xiàn)全選功能