首页 > 代码库 > 利用JQuery实现全选和反选的几种方法
利用JQuery实现全选和反选的几种方法
前面介绍了利用JavaScript实现全选功能，其中也有要注意的几点，现在讲解下在JQuery怎么实现全选和反选，下面提供了两种方法实现。
如图：要实现的效果是点击全选框全部选中，再点击全部不选中
方法一思路：1、导入jQuery库，这个网上可以下载，是免费开源的，2、设置class为fruit,通过prop设置它们的属性。
方法一：jQuery代码：
1 //定义标识，true表示选中 2 var chkall = true; 3 $(function () { 4 //全选按钮设置点击事件 5 $("#btnAll").click(function () { 6 //1、循环设置其它多选框选中状态，跟标识用的变量一样 7 $(".fruit").prop("checked", chkall); 8 //2、标识的变量取反 9 chkall = !chkall;10 })11 })
方法二思路：通过表单过滤器获取所有的单选框，再循环设置checked属性。
方法二：jQuery代码：
1 $(function () { 2 //得到全选框的值 3 var $checked = this.checked; 4 //通过表单过滤器得到所有单选框 5 $("input[class=fruit]").each(function () { 6 //单选框的值与全选框的值保持一致 7 this.checked = $checked; 8 }) 9 })10 })
最后补充说明：JQuery一般获取属性我们会用Attr，设置属性的值我们用prop.
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。