【jQuery】使用 jQuery 來選取或取消核取方塊 Use jQuery to select all or cancel checkbox

有在寫表單的朋友們應該知道

Checkbox 是一個不可或缺的好物

可是每次都要一個一個點好麻煩啊！！

有沒有個按鈕或者是選項可以全選或者全部取消呢？


答案是肯定的！

今天我們就要來教大家如何使用 jQuery 來達成這樣的效果

這裡我們用到了三個觀念

1. 觸發 click 事件

2. 使用 $.each() 來跑迴圈

3. 用 this 來取得選取的DOM

程式碼大致上如下：

$(document).ready(function() {

    $("#selectAll").click(function() {

        $("[name='list[]']").each(function() {

            this.checked = true;

        });

    });

    $("#cancelAll").click(function() {

        $("[name='list[]']").each(function() {

            this.checked = false;

        });

    });

});

解說：

當id 為 slectAll 的這個按鈕按下的時候

在每一個名為 list[] 的 checkbox

將 checked 屬性設為 true

因此 checkbox 就會全選了

相反地,

當 cancelAll 被點擊的時候

每一個名為 list[] 的 checkbox

check 屬性都會被設成 false

因此就會全部不被勾選

在此我們用 this 來取得 $("[name='list[]']") 所選取到的東西


這樣的講解有清楚嗎？

如果還是不懂

那就直接看範例吧XD

jquery_checkbox



有問題也請大家不吝指教, 謝謝 ：）