【JS实例】利用复选框实现全选、全不选和相应的反作用

最新推荐文章于 2024-06-04 10:29:08 发布

候帅洲

最新推荐文章于 2024-06-04 10:29:08 发布

阅读量182

点赞数 2

分类专栏： # JS 文章标签： JS 实例 JS实例

本文链接：https://blog.csdn.net/weixin_44591035/article/details/97398818

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、需求：

全选：点击全选，所有选项被选中；
全不选：全选情况下再次点击全选框，所有选项都不选；
相应的反作用：
a. 全选情况下，取消某一个至全部子选项，全选框也变为不选中；
b. 没有选中全选的情况下，选中了所有子选项，全选框自动选中。

二、最终实现：

0、原则

朝着 “高内聚，低耦合” 原则前进，终于改到自己不会再改的地步了。由于元素的事件属性也是在JS文件添加的，算是实现了HTML文件的零JS代码污染。并且代码也精简到自己没能力再精简的地步了。废话少说，最终的代码如下：

1、HTML源码：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>复选框练习</title>
    <script src="js/checkbox.js"></script>    
</head>
<body>
    <fieldset>
        <legend>您喜欢的汽车：</legend>
        <label><input type="checkbox" name="car" value="baoma">宝马</label>
        <label><input type="checkbox" name="car" value="benchi">奔驰</label>
        <label><input type="checkbox" name="car" value="dazhong">大众</label>
        <label><input type="checkbox" name="car" value="xiandai">现代</label>
    </fieldset>
    <label><input id="ctrlAll" type="checkbox">全选</label>
</body>

2、JS源码：

// 实现一个复选框控制一系列复选框的全选与全不选，以及反作用。
onload = function () {
    var all = document.getElementById("ctrlAll");
    var checkboxList=document.getElementsByName("car");
    var checkedNum = 0;  // 选中的子选项个数
    
    // 给全选框添加事件：使全选框可以控制全选和全不选。
    all.addEventListener("click", function(){
        for (let i=0;i<checkboxList.length;i++) {
            checkboxList[i].checked = all.checked;
        }
        //全选，checkedNum等于子选项的总数
        //全不选，checkedNum等于0
        checkedNum = all.checked * checkboxList.length;
    });
    
    // 添加事件：鼠标点击某个子选项时，检查和修正全选框。
    for (let i=0;i<checkboxList.length;i++) {
        checkboxList[i].addEventListener("click", function(){
            checkboxList[i].checked ? ++checkedNum : --checkedNum;
            all.checked = (checkedNum == checkboxList.length);
        });
    }
};

候帅洲

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【JS实例】利用复选框实现全选、全不选和相应的反作用

一、需求：全选：点击全选，所有选项被选中；全不选：全选情况下再次点击全选框，所有选项都不选；相应的反作用：a. 全选情况下，取消某一个至全部子选项，全选框也变为不选中；b. 没有选中全选的情况下，选中了所有子选项，全选框自动选中。二、最终实现：0、原则朝着 “高内聚，低耦合” 原则前进，终于改到自己不会再改的地步了。由于元素的事件属性也是在JS文件添加的，算是实现了HTML文...
复制链接

扫一扫