js复选框实现全选、全不选、反选

最新推荐文章于 2022-12-29 16:47:30 发布

kangsf1989

最新推荐文章于 2022-12-29 16:47:30 发布

阅读量1.5k

点赞数 6

分类专栏：学习笔记 HTML/CSS JS

本文链接：https://blog.csdn.net/kangsf1989/article/details/83855865

版权

学习笔记同时被 3 个专栏收录

92 篇文章 0 订阅

订阅专栏

HTML/CSS

7 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

原文：http://www.cnblogs.com/StriveE2/p/9356655.html

通过input就可以将一个简单的复选框呈现在页面上

<input type="checkbox" />

要实现的大概就是这样一个页面

思路

全选

因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同

反选

同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true

最上面的全选/全不选功能

通过id获得最上面的复选框，判断其checked值若为true则将所有的复选框设置为true,为false则设置为false

注意

为什么不是true的时候设置为false呢？因为当点击的时候复选框已发生变化，这个时候，下面的复选框应该是与上面一致的

源代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>复选框</title>

    <style type="text/css">
        
    </style>
</head>

<body>
    <input type="checkbox" id="boxid" onclick="setAllNo()" />全选/全不选
    <br />
    <input type="checkbox" name="love" value="1"/>篮球
    <br />
    <input type="checkbox" name="love" value="2"/>排球
    <br />
    <input type="checkbox" name="love" value="3"/>羽毛球
    <br />
    <input type="checkbox" name="love" value="4"/>乒乓球
    <br />
    <input type="button" value="全选" onclick="setAll()" />
    <input type="button" value="全不选" onclick="setNo()" />
    <input type="button" value="反选" onclick="setOthers()" />
    <input type="button" value="获取值" onclick="value()" id="checkAll">
    <script type="text/javascript">
        //全选函数
        function setAll() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = true;
            }
        }

        //全不选函数
        function setNo() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = false;
            }
        }

        //反选
        function setOthers() {
            var loves = document.getElementsByName("love");
            for (var i = 0; i < loves.length; i++) {
                if (loves[i].checked == false)
                    loves[i].checked = true;
                else
                    loves[i].checked = false;
            }
        }
        
        //全选/全不选操作
        function setAllNo(){
            var box = document.getElementById("boxid");
            var loves = document.getElementsByName("love");
            if(box.checked == false){
                for (var i = 0; i < loves.length; i++) {
                    loves[i].checked = false;
                }
            }else{
                for (var i = 0; i < loves.length; i++) {
                    loves[i].checked = true;
                    }
            }
        }

        //选择value值
        function value(){
            obj = document.getElementsByName("love");
            check_val = '';
            for (k in obj) {
                if (obj[k].checked)
                    check_val += obj[k].value + ',';
            }
        }
    </script>

</body>

</html>

kangsf1989

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js复选框实现全选、全不选、反选

原文：http://www.cnblogs.com/StriveE2/p/9356655.html通过input就可以将一个简单的复选框呈现在页面上&lt;input type="checkbox" /&gt;要实现的大概就是这样一个页面思路全选因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设...
复制链接

扫一扫

专栏目录