关键代码
<body>
<!-- 3、实现 表单中 全选/全不选 反选 的操作
项目: 游泳 爬山 看书 -->
<form action="" onsubmit="return false">
<label for="">项目:</label>
<input type="checkbox">游泳
<input type="checkbox">爬山
<input type="checkbox">看书
<button>全选</button>
<button>全不选</button>
<button>反选</button>
</form>
<script>
var chs = document.querySelectorAll('input[type=checkbox]');
var bts = document.querySelectorAll('button');
console.log(chs, bts);
// 全选
bts[0].onclick = function () {
for (var k in chs) {
chs[k].checked = true;
}
}
// 全不选
bts[1].onclick = function () {
for (var k in chs) {
chs[k].checked = false;
}
}
// 反选
bts[2].onclick=function(){
for(var k in chs){
if(chs[k].checked==true){
chs[k].checked=false;
}else{
chs[k].checked=true;
}
}
}
</script>
</body>