在開發中,經常需要對一組多選框進行操作。比如選擇所有選項,或者取消所有選項。使用jQuery,可以很方便地實現這種功能。
首先,給全選的復選框設置一個id,以便于綁定事件。如下:
<input type="checkbox" id="selectAll"> 全選
然后,給所有選項的復選框設置一個class,以便于選擇。如下:
<input type="checkbox" class="item"> 選項1 <input type="checkbox" class="item"> 選項2 <input type="checkbox" class="item"> 選項3
接下來,使用jQuery綁定全選復選框的click事件,當點擊時,將所有選項的復選框的狀態設置為全選復選框的狀態。如下:
$("#selectAll").click(function(){ var isChecked = $(this).prop("checked"); $(".item").prop("checked", isChecked); });
上面的代碼使用了prop方法。它可以獲取或設置一個屬性的值。在這里,我們獲取了全選復選框的狀態,然后將所有選項的復選框的狀態設置為這個狀態。
這樣,就實現了多選框的全選功能。其中,要注意的是,多選框的id和class要唯一,不然綁定事件會出問題。
上一篇css異形div
下一篇jquery設置時間延遲