Jquery：全选，反选

最新推荐文章于 2022-04-15 17:16:16 发布

雄起的羔羊

最新推荐文章于 2022-04-15 17:16:16 发布

阅读量76

点赞数

分类专栏： Java

一切都来得及！共同进步！

本文链接：https://blog.csdn.net/qq_34971756/article/details/95483114

版权

Java 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">

        $(function () {

            //给全选按钮绑定单击事件
            $("#ckall").click(function () {
                // var b=$(this).prop("checked");        //获取checked对应的属性
                // $("[name=hobby]").prop("checked",b);  //修改属性  prop("属性名","值")
                $("[name=hobby]").prop("checked",$(this).prop("checked"));
            });

            //给反选按钮绑定事件
            $("#ckfan").click(function () {
                $("[name=hobby]").each(function (index,element) { //迭代集合
                    // var b=$(element).prop("checked"); //获取之前选中的状态
                    // $(element).prop("checked",!b);// 然后设置取反设置回去
                    $(element).prop("checked",!$(element).prop("checked"));
                }); //循环集合
            });

            //子选项都选中，则全选按钮选中
            $("[name=hobby]").click(function () {
                //选中 被勾选的孩子个数
                var count1=$("[name=hobby]:checked").length;
                //总个数
                var count2=$("[name=hobby]").length;
                if(count1==count2){
                    $("#ckall").prop("checked",true);
                }else{
                    $("#ckall").prop("checked",false);
                }
            });
        });

    </script>
</head>
<body>
<input type="checkbox" id="ckall"/> 全选/全不选
<input type="checkbox" id="ckfan" /> 反选
<hr/>
<input type="checkbox" name="hobby" value="足球" />足球<br/>
<input type="checkbox" name="hobby" value="篮球" />篮球<br/>
<input type="checkbox" name="hobby" value="游泳" />游泳<br/>
<input type="checkbox" name="hobby" value="唱歌" />唱歌<br/>
<input type="checkbox" name="hobby" value="唱歌" />唱歌<br/>
<input type="checkbox" name="hobby" value="唱歌" />唱歌<br/>
<input type="checkbox" name="hobby" value="唱歌" />唱歌<br/>
<input type="checkbox" name="hobby" value="唱歌" />唱歌<br/>

</body>
</html>