HTML5+JavaScript(全选和全不选)

来源:互联网 发布:淘宝卖家草稿箱在哪里 编辑:程序博客网 时间:2024/06/04 19:28
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div align="center">
        <input type="checkbox" id="check1" />全选/全不选
        <div id="checkboxs">
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
        </div>
        </div>
    </body>
    <script>
        var check1 = document.getElementById("check1");
        var checkboxs = document.getElementById("checkboxs");
        var ked = checkboxs.getElementsByTagName("input");
        check1.onclick = function() {
            //全选
            if(check1.checked) {
                for(var i = 0; i < ked.length; i++) {
                    ked[i].checked = true;
                }
            }
            //全不选
            if(!check1.checked) {
                for(var i = 0; i < ked.length; i++) {
                    ked[i].checked = false;
                }
            }
        }
    </script>

</html>
原创粉丝点击