利用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.