使用jQuery实现完整的全选,全不选以及反选功能

<html>

    <head>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

        <script type="text/javascript">

            $(function(){

                $("#checkAll").click(function(){            //全选

                    $(":checkbox").prop("checked",true);

                })

                $("#checkNo").click(function(){             //全不选

                    $(":checkbox").prop("checked",false);

                })

                $("#checkrev").click(function(){

                    $(":checkbox[name='item']").each(function(){ //获取全部的选项 each() 方法规定为每个匹配元素规定运行的函数。提示:返回 false 可用于及早停止循环。

                        this.checked=!this.checked;

                        //each遍历的函数中,this对象为当前正在遍历的对象

                    })

                    var a=$(":checkbox[name='item']").length;           //判定是否满选

                         

                    var b=$(":checkbox[name='item']:checked").length;

                    if(a==b){

                        $("#checkedAllBox").prop("checked",true);

                    }else{$("#checkedAllBox").prop("checked",false);}

                })

                $(":checkbox[name='item']").click(function(){           //在选择选项时判定是否满选

                    var a=$(":checkbox[name='item']").length;

                    var b=$(":checkbox[name='item']:checked").length;

                    $("#checkedAllBox").prop("checked",a==b);

                })

   

            })

        </script>

    </head>

    <body>

       <input type="checkbox" name="item">python

       <input type="checkbox" name="item">c

       <input type="checkbox" name="item">java

       <input type="checkbox" id="checkedAllBox">全选/全不选

       <p></p>

       <button id="checkAll">全选</button>

       <button id="checkNo">全不选</button>

       <button id="checkrev">反选</button>

    </body>

</html>

运行结果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值