思路
获取全选框的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()**
<br>
#修改checkbox样式
##css
label{
font-size: 18px;
cursor: pointer;
}
input[type='checkbox']{
20px;
height: 20px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 2px;
outline: none;
vertical-align: sub;
margin: 0 9px;
}
input[type='checkbox']:checked{
content:'';
box-shadow: 0 0 0 2px #fff inset;
background: #2c323b;
}
##html
清除checkbox默认样式后,使用:checked伪类选择器,被选中时设置其背景色,并用内阴影产生间距
**所有主流浏览器都不支持appearance属性,Firefox支持替代的-moz-appearance属性,Safari和Chrome支持替代的-webkit-appearance属性**若浏览器不支持此属性则显示默认样式
<br>
参考资料
[改变checkbox的默认样式](https://www.cnblogs.com/yuanyanbk/p/8136682.html)