html全选全不选代码

在HTML中，我们经常需要提供全选/全不选的功能，比如复选框界面。下面是一段可以实现全选/全不选的代码：

    input type="checkbox" id="checkAll" onclick="checkAll()">
     全选    input type="checkbox" class="checkItem" onclick="checkItem()">
     选项1    input type="checkbox" class="checkItem" onclick="checkItem()">
     选项2    input type="checkbox" class="checkItem" onclick="checkItem()">
     选项3    script>
        function checkAll() {
                var all = document.getElementById("checkAll");
     //获取全选框            var items = document.getElementsByClassName("checkItem");
     //获取所有选项            for (var i = 0;
     i  items.length;
 i++) {
                    items[i].checked = all.checked;
 //将选项的checked属性与全选框的checked属性同步            }
        }
        function checkItem() {
                var all = document.getElementById("checkAll");
     //获取全选框            var items = document.getElementsByClassName("checkItem");
     //获取所有选项            var count = 0;
     //已选数量            for (var i = 0;
     i  items.length;
 i++) {
                if (items[i].checked) {
                        count++;
 //已选数量加1                }
            }
            if (count == items.length) {
     //如果已选数量等于选项总数，则勾选全选框                all.checked = true;
            }
 else {
     //否则取消全选框勾选状态                all.checked = false;
            }
        }
        /script>
    

上述代码中，我们使用了id属性和class属性对全选框和选项进行了区分。在checkAll函数中，我们通过循环所有选项，将选项的checked属性与全选框的checked属性同步。在checkItem函数中，我们通过循环所有选项，统计已选数量，并根据已选数量判断是否需要勾选全选框。通过这段代码，我们可以轻松实现复选框全选/全不选的功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！