jQuery怎么全选反选全不选

裕书

已于 2022-03-18 11:16:13 修改

阅读量1.5k

点赞数 2

分类专栏： jquery 文章标签： jquery 前端 javascript

于 2022-03-18 11:07:09 首次发布

本文链接：https://blog.csdn.net/yushu778/article/details/123569607

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.所用到的属性

1.$( ).attr(属性名称）；获取属性信息值

2.$( )attr(属性名称，值); 设置属性的信息

3.:eq(下标)；下标从0开始计算

注：在使用attr进行反选全选全不选时部分情况下会出现bug，因此我们会用prop代替，其用法与attr一样。

二.教程方法解析

<body>
        <h1>全选、全不选、反选操作</h1>
        爱好：
        <input type="checkbox" class="hby" name="hobby" value="1" />篮球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="2" />足球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="3" />排球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="4" />乒乓球&nbsp;
        
        <br /><br />
        <input type="button" value="全选" onclick="selAll()" />
        <input type="button" value="全不选" onclick="selNotAll()" />
        <input type="button" value="反选" onclick="selFan()" />
        <script type="text/javascript">
        function selAll(){
            //全选
            // $('li').css('color','red'); //css()方法内部有遍历机制，会为每个li设置样式
            // $('.hby').attr('checked',true);//attr()方法内部有遍历机制，会为每个复选框设置选中
            $(".hby").prop("checked", true);
        }
        function selNotAll(){
            //全不选
            //$('.hby').attr('checked',false);
            $(".hby").prop("checked", false);
        }
        function selFan(){
            //反选
            //遍历全部复选框，选中就取消，未选中就设置选中
            //$('.hby')
            for(var i=0; i<$('.hby').length; i++){
                //判断当前复选框选中情况
                var flag = $(".hby:eq("+i+")").prop("checked");
                $(".hby:eq("+i+")").prop("checked",!flag);
            }
        }
        </script>
</body>