思路
获取全选框的checked状态,将其状态赋值给各个子框,这样子框状态将与全选框保持一致,实现全选/全不选
但子框被全部选中时全选框状态也要跟着改变,给每个子框绑定点击事件,每点一次都会循环判断全部子框状态
html
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="cbAll"/>
</th>
<th>菜名</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>糖醋鱼</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>番茄蛋</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>空心菜</td>
</tr>
<tr>
<td>
<input type="checkbox" value="dd"/>
</td>
<td>紫菜汤</td>
</tr>
</tbody>
</table>
</div>
js
var cbAll = document.getElementById('cbAll');
var cks = document.querySelector('tbody').getElementsByTagName('input');
cbAll.onclick = function () {
for (var i = 0; i < cks.length; i++) {
cks[i].checked = cbAll.checked;
}
}
for (var i = 0; i < cks.length; i++) {
cks[i].onclick = function () {
var flag = true;
for (var j = 0; j < cks.length; j++) {
if (!cks[j].checked) {
flag = false;
break;
}
}
cbAll.checked = flag;
}
}
jQuery实现
$('#cbAll').click(function () {
$('tbody input').each(function (i,item) {
item.checked = $('#cbAll').prop('checked');
})
})
$('tbody input').click(function () {
var flag = true;
$('tbody input').each(function (i,item) {
if(!item.checked){
flag = false;
return false;
}
})
$('#cbAll').prop('checked',flag);
})
jq1.6版本开始,attr()方法设置的属性如果不存在则返回undefined,所以对于checked、selected和disabled等布尔类型的属性,不要用attr(),应该用prop()