摘要： <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]">選項(xiàng)1</label></li>

<li><input type="checkbox" name="item" id='item[1]'><label for="item[1]">選項(xiàng)2</label></li>

<li><input type="checkbox" name="item" id='item[2]'><label for="item[2]">選項(xiàng)3</label></li>

<li><input type="checkbox" name="item" id='item[3]'><label for="item[3]">選項(xiàng)4</label></li>

<li><input type="checkbox" name="item" id='item[4]'><label for="item[4]">選項(xiàng)5</label></li>

<li><input type="checkbox" name="item" id='item[5]'><label for="item[5]">選項(xiàng)6</label></li>

<li><input type="checkbox" name="item" id='item[6]'><label for="item[6]">選項(xiàng)7</label></li>

<li><input type="checkbox" name="item" id='item[7]'><label for="item[7]">選項(xiàng)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é)：獲取【全選】控件的句柄，然后通過(guò)點(diǎn)擊事件觸發(fā)函數(shù)，再通過(guò)document.getElementById('checkall').checked獲取其選中狀態(tài)，document.getElementsByName以數(shù)組形式循環(huán)返回item子選項(xiàng)的句柄，最后根據(jù)【全選】的選中狀態(tài)來(lái)循環(huán)改變item子選項(xiàng)的選中狀態(tài)。個(gè)人建議盡量少用<br>，所以我使用ul標(biāo)簽將子選項(xiàng)以li容器標(biāo)簽存放，實(shí)現(xiàn)塊元素效果。

批改老師：西門(mén)大官人批改時(shí)間：2019-04-20 13:26:41
老師總結(jié)：如果學(xué)習(xí)過(guò)jquery，可以用jquery更方便的實(shí)現(xiàn)全選功能