2021-05-09全选和反选

多种方案

< !DOCTYPE html>
< html>
< head>
< title>< /title>
< meta charset=“utf-8”>
< style type=“text/css”>< /style>
< /head>
< body>

< span>全选< /span>
< input type=“checkbox” name="" id=“main”>
< br>
< div>
< input type=“checkbox” name="">
< span>苹果< /span>
< br>
< input type=“checkbox” name="">
< span>香蕉< /span>
< br>
< input type=“checkbox” name="">
< span>草莓< /span>
< br>
< input type=“checkbox” name="">
< span>香梨< /span>
< br>
< input type=“checkbox” name="">
< span>菠萝< /span>
< /div>
< /body>
< script type=“text/javascript”>
//获取元素
var select = document.getElementById(‘main’);
var div = document.getElementsByTagName(‘div’)[0];
var inps = document.getElementsByTagName(‘input’);//同时也获取了全选按钮中的input
//绑定全选的点击事件
//第一种思路，同显示隐藏按钮
var bool = false;//此时状态未选中;
select.onclick = function(){
for(var i = 0; i < inps.length; i++){
if(bool){
console.log(222);
inps[i].checked = false;
// alert(666);
}
else{
inps[i].checked = true;
}
}
bool = !bool;
}
//第二种 this
// select.onclick = function(){
// //点击全选，下边的类型相同也被选择
// for(var i = 0; i < inps.length; i++){
// //保存值
// inps[i].index = i;
// var input = inps[i];
// if(input.type === ‘checkbox’){//type类型相等的话
// input.checked = this.checked;
// }
// }
// }
//反向选择
var num = 0;
for (var m = 1; m < inps.length; m++){
inps[m].onclick = function () {
if(this.checked == true){
num++;
}
else{
num–;
}
if(num == 5){
select.checked = true;
}
else{
select.checked = false;
}
}

}

< /script>
< /html>