jquery實現的全選和反選

隨著網站功能的不斷完善，複選框的應用也越來越廣泛。而當複選框的數量較多時，一個全選或反選的功能將會非常方便使用者的操作。而JQuery函式庫提供了對應的API可以輕鬆實現這個功能。

一、全選功能實作

全選功能指的是一種使用者操作，可以選擇全部複選框，將其選取狀態切換為已選取狀態。 jQuery實作全選的程式碼如下：

 $("#checkAll").click(function () {
        $('input[type="checkbox"]').prop('checked', this.checked);
 });

以上程式碼中，$符號代表選取某一個元素，當點選id為checkAll的元素時，對於所有輸入類型為checkbox的元素，將其勾選狀態設置成選中，即this.checked狀態。

二、反選功能實作

反選功能是指使用者可以將所有未選取的複選框選中，已選取的複選框則變成未選中。反選的jQuery程式碼如下：

 $("#reverseSelect").click(function () {
        $('input[type="checkbox"]').each(function () {
            this.checked = !this.checked;
        });
 });

以上程式碼中，$符號選取id為reverseSelect的元素，點選時對每個input類型為checkbox的元素進行遍歷，將其勾選狀態取反。如果原先為選取狀態，則變成未選取狀態；否則，變成已選取狀態。

三、全選和反選的綜合功能實現

如果需要同時實現全選和反選兩個功能，可以透過程式碼修改，實現如下：

$("#checkAll").click(function () {
        $('input[type="checkbox"]').prop('checked', this.checked);
 });
$("#reverseSelect").click(function () {
        $('input[type="checkbox"]').each(function () {
            this.checked = !this.checked;
        });
 });

以上程式碼中，將兩個功能分別綁定到id為checkAll和id為reverseSelect的按鈕上。這兩個按鈕分別對應全選和反選兩種功能。

總的來說，jQuery提供的全選和反選功能，能夠大幅提升使用者操作的便利性。這種實作方式簡單、易於使用，可以適用於各種類型的網站。

以上是jquery實現的全選和反選的詳細內容。更多資訊請關注PHP中文網其他相關文章！