全选全不选反选

这个我们应该都很熟悉,今天我们来实现一下功能

 <script type="text/javascript">
        //全选
        function checkAll(){
           var hobbies = document.getElementsByName("hobby");
           for (var i = 0;i < hobbies.length;i++){
               hobbies[i].checked = true;
           }
        }
        //全不选
        function checkNo(){
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0;i < hobbies.length;i++){
                hobbies[i].checked = false;
            }
        }
        //反选
        function checkReverse(){
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0;i < hobbies.length;i++){
                hobbies[i].checked = !hobbies[i].checked;
                // if (hobbies[i].checked){
                //     hobbies[i].checked = false;
                // }else {
                //     hobbies[i].checked = true;
                // }
            }
        }
    </script>
</head>
<body>
兴趣爱好
<input type="checkbox" name="hobby" value="c">c语言
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="php">php
<br>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>

getElementByName 是根据指定的name属性查询返回多个标签对象集合,这个集合操作和数组一样
集合中每个元素都是dom对象
经验证,这个集合中的元素顺序是他们在html页面自上而下的顺序

checked表示复选框的选中状态,选中的true,不选中的false
checked属性可读可写

全选 全不选 反选

猜你喜欢