js实现全选/取消全选checkbox

最新推荐文章于 2022-03-16 20:39:53 发布

weixin_30364147

最新推荐文章于 2022-03-16 20:39:53 发布

阅读量105

点赞数

原文链接：http://www.cnblogs.com/huahuahua/p/6723412.html

版权

 1 <body>
 2 
 3 <input type="checkbox" name="b">1111
 4 <input type="checkbox" name="b">2222
 5 <input type="checkbox" name="b">3333
 6 <input type="checkbox" name="b">4444
 7 <input type="checkbox" id="a">全选/取消
 8 
 9 <script>
10 var a1 = document.getElementById("a");//取到全选checkbox
11 var b1 = document.getElementsByName("b");//取到前面四个box
12 //点击全选box触发onclick事件
13 a1.onclick = function () {
14     //如果全选box是被选中状态,即checked==true
15     if (a1.checked == true){
16         for (var i=0;i<b1.length;i++){
17             b1[i].checked =true; //for循环遍历b1数组,改变他们的checked的值都为true
18         }
19     }else{ //否则,改变b1数组中的元素的checked的值都为false
20         for (var j=0;j<b1.length;j++){
21             b1[j].checked = false;
22         }
23     }
24 };
25 for (var m = 0;m < b1.length;m++) { //遍历数组b1,给b1每个元素都绑定一个onclick事件
26     b1[m].onclick = function bbb() {
27         var checked1 = true; //声明checked1为true
28         for (n = 0; n < b1.length; n++) {
29             if (b1[n].checked == false) {  //循环判断数组b1中是否有元素的checked的值为false,如果有 则说明有选项没有选中,那么全选按钮为false
30                 checked1 = false; //把false赋给checked1
31             }
32         }
33         a1.checked = checked1; //最后把checked1的值赋给全选按钮的checked.
34     }
35 
36 }
37 
38 </script>
39 </body>

转载于:https://www.cnblogs.com/huahuahua/p/6723412.html

weixin_30364147

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现全选/取消全选checkbox

1 <body> 2 3 <input type="checkbox" name="b">1111 4 <input type="checkbox" name="b">2222 5 <input type="checkbox" name="b">3333 6 <input type="checkbox"...
复制链接

扫一扫