Dom复选框操作

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function hiddenDiv(){
                var divNode = document.getElementById("dv");
                divNode.style.display = "none";
            }
            function showDiv(){
                var divNode = document.getElementById("dv");
                divNode.style.display = "block";
            }
            function selectAll(){
                var ckbs = document.getElementsByName("ckb");
                for(var i=0;i<ckbs.length;i++){
                    ckbs[i].checked = true;
                }
            }
            function unselectAll(){
                var ckbs = document.getElementsByName("ckb");
                for(var i=0;i<ckbs.length;i++){
                    ckbs[i].checked = false;
                }
            }
            function reverseSelect(){
                var ckbs = document.getElementsByName("ckb");
                for(var i=0;i<ckbs.length;i++){
                    /*
                    if(ckbs[i].checked){
                        ckbs[i].checked = false;
                    }else{
                        ckbs[i].checked = true;
                    }
                    */
                    ckbs[i].checked = !ckbs[i].checked;//简单的一句话
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="隐藏" onclick="hiddenDiv();" />
        <input type="button" value="显示" onclick="showDiv();" />
        <input type="button" value="全选" onclick="selectAll();" />
        <input type="button" value="全不选" onclick="unselectAll();" />
        <input type="button" value="反选" onclick="reverseSelect();" />
        <hr />
        <div id="dv">
            <input type="checkbox" name="ckb" />
            <input type="checkbox" name="ckb" />
            <input type="checkbox" name="ckb" />
            <input type="checkbox" name="ckb" />
            <input type="checkbox" name="ckb" />
            <input type="checkbox" name="ckb" />
        </div>
    </body>
</html>

这里写图片描述

posted @ 2018-05-29 15:50  hunterxing  阅读(326)  评论(0)  编辑  收藏  举报