ie 7,8下非动态创建的复选框的全选与全不选

2017-11-4 19:33:26 3,182 views
<!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");
 }
}

 


 

0

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。