复选框全选中，全不选中，反选按钮实现

dom对象的getElementByName()函数可以将相同名字的对象都放到一个集合中返回，
通过操作这个集合中元素（也是dom对象）的checked属性来实现全选等功能

以下为基础写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>

    <script >

        //全选
        var hobbies = document.getElementsByName("hobby");
        function onclick1() {
            for(var i=0;i<hobbies.length;i++)
                hobbies[i].checked=true;
        }

        //全不选
        function onclick2() {
            for(var i=0;i<hobbies.length;i++)
                hobbies[i].checked = false;
        }
        function onclick3() {
            for(var i=0;i<hobbies.length;i++)
                hobbies[i].checked = !hobbies[i].checked;
        }
    </script>

</head>
<body>

  <!--复选框全选，全不选，反选-->
  爱好：<input type>
  <input type="checkbox" name="hobby" value="c"/>c
  <input type="checkbox" name="hobby" value="c++"/>c++
  <input type="checkbox" name="hobby" value="java"/>java
  <br>
  <button onclick="onclick1()">全选</button>
  <button onclick="onclick2()">全不选</button>
  <button onclick="onclick3()">反选</button>
</body>
</html>

以下为jQuery写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
    <script type="text/javascript" src="static/script/jquery-3.4.1.min.js" ></script>
    <script type="text/javascript">
        /*
        *   jQuery写法
        * */
        $(function () {
            //全选/全不选：要求点击这个复选框，下面三个全选，再次点击，下面三个全不选
            $("#all").click(function () {
                $("input[name='hobby']").prop("checked", this.checked);//this代表着调用这个function的dom对象，即'全选/全不选'这个复选框

            });

            //全选按钮
            $("[name=btn1]").click(function () {
                $(":checkbox").prop("checked", true);
            })

            //全不选按钮
            $("[name=btn2]").click(function () {
                $(":checkbox").prop("checked",false);
            })

            //反选按钮
            $("[name=btn3]").click(function () {
                $("[name=hobby]").each(function () {
                    this.checked=!this.checked;
                })
                /*检查是否满选
                * */
                //得到全部选项的数量
                var checkedLength = $("[name=hobby]:checked").length;

                //得到选中选项的数量
                var AllLength = $("[name=hobby]").length;

                //比较两个数量
                $("#all").prop("checked",checkedLength==AllLength)
            })

            //提交按钮
            $("[name=btn4]").click(function () {
                $("[name=hobby]:checked").each(function () {
                    alert(this.value);
                })
            })

            //有一个没选中，全选/全不选就取消选中
            //为所有复选框绑定点击事件
            $("[name=hobby]").click(function () {
                var checkedLength = $("[name=hobby]:checked").length;
                var AllLength = $("[name=hobby]").length;
                $("#all").prop("checked",checkedLength==AllLength)
            })
        })
    </script>
</head>
<body>

<!--复选框全选，全不选，反选-->
    爱好：<input type="checkbox" name="checkbox" id="all">全选/全不选 
    <br>
    <input type="checkbox" name="hobby" value="c" />c
    <input type="checkbox" name="hobby" value="c++"/>c++
    <input type="checkbox" name="hobby" value="java"/>java
    <br>
    <button name="btn1" value="全选">全选</button>
    <button name="btn2" value="全不选">全不选</button>
    <button name="btn3" value="反选" >反选</button>
    <button name="btn4" value="提交">提交</button>

</body>
</html>
posted @ 2021-10-19 16:18  这个世界会好的  阅读(415)  评论(0)    收藏  举报