利用JQuery实现全选和反选的几种方法

前面介绍了利用JavaScript实现全选功能，其中也有要注意的几点，现在讲解下在JQuery怎么实现全选和反选，下面提供了两种方法实现。

如图：要实现的效果是点击全选框全部选中，再点击全部不选中

方法一思路：1、导入jQuery库，这个网上可以下载，是免费开源的，2、设置class为fruit,通过prop设置它们的属性。

方法一：jQuery代码：

       //定义标识，true表示选中
         var chkall = true;
         $(function () {
             //全选按钮设置点击事件
             $("#btnAll").click(function () {
                 //1、循环设置其它多选框选中状态，跟标识用的变量一样
                 $(".fruit").prop("checked", chkall);
                 //2、标识的变量取反
                 chkall = !chkall;
             })
         })

方法二思路：通过表单过滤器获取所有的单选框，再循环设置checked属性。

方法二：jQuery代码：

         $(function () {
                 //得到全选框的值
                 var $checked = this.checked;
                 //通过表单过滤器得到所有单选框
                 $("input[class=fruit]").each(function () {
                     //单选框的值与全选框的值保持一致
                     this.checked = $checked;
                 })
             })
         })

最后补充说明：JQuery一般获取属性我们会用Attr，设置属性的值我们用prop.