jquery實現的全選和反選

WBOY
發布: 2023-05-28 16:56:38
原創
2096 人瀏覽過

隨著網站功能的不斷完善,複選框的應用也越來越廣泛。而當複選框的數量較多時,一個全選或反選的功能將會非常方便使用者的操作。而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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!