JQuery实现全选反选全不选

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

词不达意难知

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

阅读量258

点赞数

分类专栏： JQuery 文章标签： jq实现全选全不选反选 jquery实现全选全不选反选

本文链接：https://blog.csdn.net/qq_45284938/article/details/98382142

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先知道以下的方法:

prop() 方法: 设置或返回被选元素的属性和值。(在获取类似checked这种属性时，获取返回的是布尔值，故此可以利用这个方法实现)；

each()方法: 以每一个匹配的元素作为上下文来执行一个函数。（用大白话来讲就是循环，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。）

下面是代码及结构：

 <script>
        $(function(){
		//全选
            $('button:eq(0)').click(function(){
                    $(':checkbox').each(function(){
                      $(':checkbox').prop("checked", true)
                    });
            })
            //全不选
                $('button:eq(1)').click(function(){
                    $(':checkbox').each(function(){
                        $(':checkbox').prop("checked", false)
                    })
            })
				//反选
            $('button:eq(2)').click(function(){
                $(':checkbox').each(function(){
                    $(this).prop("checked", !$(this).prop("checked"));
                })
            })



        })

    </script>
</head>
<body>
<input type="checkbox" name="srt"  value="a"/>
<input type="checkbox" name="srt"  value="b"/>
<input type="checkbox" name="srt"  value="c"/>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
</body>

词不达意难知

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery实现全选反选全不选

首先知道以下的方法:prop() 方法: 设置或返回被选元素的属性和值。(在获取类似checked这种属性时，获取返回的是布尔值，故此可以利用这个方法实现)；each()方法: 以每一个匹配的元素作为上下文来执行一个函数。（用大白话来讲就是循环，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。）下面是代码及结构： <scr...
复制链接

扫一扫