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" 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>
