全选(原生js)
作者:互联网
<div id="box">
<input type="checkbox" name="" id="quan">
<div id="xuan">
<div class="bx">
<input type="checkbox" name="" class="no">
AA
</div>
<div class="bx">
<input type="checkbox" name="" class="no">
BB
</div>
<div class="bx">
<input type="checkbox" name="" class="no">
CC
</div>
</div>
</div>
<script>
var box=document.getElementById("box")
// 1.获取全选框
var quan=document.getElementById("quan")
// 2.获取复选框
var node=document.getElementsByClassName("no")
// 3.点击全选,所有框选中
quan.οnclick=function(){
// console.log(quan.checked)
for(var i=0;i<node.length;i++){
// 赋值所有复选框当前全选框的状态
node[i].checked=this.checked
}
}
// 4.复选框全部选中,全选框选择,有一个复选框没选中,全选框取消全选
for(var i=0;i<node.length;i++){
node[i].οnclick=function(){
// 假设默认选中
var de=true
for(var j=0;j<node.length;j++){
// 判断有没有全部选中,没有让de 返回false
if(!node[j].checked){
de=false;
break;
}
}
quan.checked=de
}
}
</script>
标签:原生,node,checked,js,全选,quan,var,复选框,选框 来源: https://blog.csdn.net/weixin_45673735/article/details/122782312