javascript checkbox作为开关，控制全选和全不选的动态关联实现

最新推荐文章于 2020-04-01 10:11:43 发布

南郭竽

最新推荐文章于 2020-04-01 10:11:43 发布

阅读量1.5k

点赞数

分类专栏：大猫学javascript 文章标签： javascript checkbox

本文链接：https://blog.csdn.net/DucklikeJAVA/article/details/52562969

版权

大猫学javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

如你所知如果使用一个checkbox作为一组checkbox的总开关的话。那么，总开关的逻辑当然是：在当前全部选中的情况下，点击总开关，就会全部不选中；否则，就全部选中。
另外，当被控制的子checkbox发生改变的时候，导致原本的全部选中，变成了部分不选中，那么总开关的状态也要改变成非选中状态。
再然后，任何其他外部因素导致当前的子checkbox勾选状态发生改变，都应该同步总开关的状态。

这里有一个栗子：假设页面是长这样子的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>check.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
    您的爱好很广泛!!!
     <br>
     <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
     <br>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="游泳"/>游泳
        <input type="checkbox" name="items" value="唱歌"/>唱歌
        <br>
        <input type="button" name="checkall" id="checkall" value="全选" />
        <input type="button" name="checkall" id="checkallNo" value="全不选" />
        <input type="button" name="checkall" id="check_revsern" value="反选" />
  </body>
  <script language="JavaScript">
  </script>
</html>

那么js的逻辑该怎么处理呢？一种可行的方案是：

<script language="JavaScript">
    var cbAll = document.getElementById("checkItems");
    var items = document.getElementsByName("items");

    var calcCheckedCount = function () {
        var count = 0;
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.checked) {
                count++;
            }
        }
        return count;
    }

    var checkToggle = function () {
        cbAll.checked = calcCheckedCount() == items.length;
    }
    cbAll.onclick = function () {
//        cbAll.checked = !cbAll.checked; // 搞定自己 --> todo 没必要，系统自动帮你搞定过了！
        var count = calcCheckedCount();
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            item.checked = count != items.length;
            item.onclick = function () {
                // 每个item 点击的时候，会导致顶部的全选/全部选 checkbox 勾选状态改变
                checkToggle();
            }
        }
    }
    // ###################

    document.getElementById("checkall").onclick = function () {
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            item.checked = true;
        }
        checkToggle();
    }
    document.getElementById("checkallNo").onclick = function () {
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            item.checked = false; 
            // todo -> 一定要这么干 ，item.setAttribute("checked", ""); 不行！！！
        }
        checkToggle();
    }
    document.getElementById("check_revsern").onclick = function () {
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            item.checked = !item.checked;
        }
        checkToggle();
    }
</script>

那就这样吧。代码在谷歌/火狐浏览器上运行ok.

南郭竽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript checkbox作为开关，控制全选和全不选的动态关联实现

如你所知如果使用一个checkbox作为一组checkbox的总开关的话。那么，总开关的逻辑当然是：在当前全部选中的情况下，点击总开关，就会全部不选中；否则，就全部选中。另外，当被控制的子checkbox发生改变的时候，导致原本的全部选中，变成了部分不选中，那么总开关的状态也要改变成非选中状态。再然后，任何其他外部因素导致当前的子checkbox勾选状态发生改变，都应该同步总开关的状态。这里有一
复制链接

扫一扫