<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 你爱好的运动是? <input type="checkbox" name="checkboxall" id="sele">全选/全不选 <input type="checkbox" name="checkbox">足球 <input type="checkbox" name="checkbox">篮球 <input type="checkbox" name="checkbox">羽毛球 <input type="checkbox" name="checkbox">乒乓球 <button id="selectall">全选</button> <button id="selectno">全不选</button> <button id="inverse">反选</button> <script type="text/javascript"> var sele = document.getElementById("sele"); var selectall = document.getElementById("selectall"); var selectno = document.getElementById("selectno"); var inverse = document.getElementById("inverse"); var len = document.getElementsByName("checkbox"); sele.onclick = function() { for (var i = 0; i < len.length; i++) { len[i].checked = this.checked; //就是将选择勾选的复选框的状态赋值给后面的复选框就可以了。 //可以完美的解决ie 7,8下非动态创建的复选框的全选问题 } }; //复选框全选,全不选 <!-- // for (var i = 0; i < len.length; i++) { // if (len[i].getAttribute("checked") == null) { // len[i].setAttribute("checked", true); // } else { // len[i].removeAttribute("checked"); // } // } --> selectall.onclick = function() { for (var i = 0; i < len.length; i++) { len[i].checked = true; } }; // 全选 selectno.onclick = function() { for (var i = 0; i < len.length; i++) { len[i].checked = false; }; } // 全部选 inverse.onclick = function() { for (var i = 0; i < len.length; i++) { len[i].checked = !len[i].checked; //相当于 // if(len[i].checked ){ // len[i].checked=false; // }else{ // len[i].checked=true; // } } }; // 反选 </script> </body> </html>
由于审题不清,当在写其中的复选框全选和全部选的时候,让我纠结了挺久,这段代码是我一开始想的,在chrome和ff完美通过, 在ie9+以上也没问题,关键在于ie7,8
这段代码死活不行,ie7,8不支持setAttribute,然后查了下要用checked;
for (var i = 0; i < len.length; i++) { if (len[i].getAttribute("checked") == null) { len[i].setAttribute("checked", true); } else { len[i].removeAttribute("checked"); } }