jquery選取所有checkbox和判斷是否全部checkbox已經被勾選

浏览数：23 / 时间：2015年06月09日

前言勾選/取消勾選全部勾選checkbox的時候勾選/取消勾選所有對應的checkbox 當所有對應checkbox有別勾選的時候，全部勾選checkbox 也要被勾選完整程式碼範例前言

在做網頁的時候常常遇到的是列表清單。而通常列表必須提供checkbox來供使用者選取之後在做相對應的動作。因此，前端處理checkbox觸發變的很常用。

這一篇我會介紹兩個常用jquery的snippet來達到：

勾選/取消勾選全部勾選checkbox的時候勾選/取消勾選所有對應的checkbox 當所有對應checkbox有別勾選的時候，全部勾選checkbox 也要被勾選勾選/取消勾選全部勾選checkbox的時候勾選/取消勾選所有對應的checkbox

首先，我們假設我們有一個form裡面是一個table清單代表著人名和歲數。在Table的標題裡面有一個checkAll checkbox表示是否要全選每一列的checkbox。

有了這個概念，我們直接看一下程式碼：

//When the all checkbox is clicked
$(‘#checkAll‘).change(function() {

    //get all checkbox which want to change
    var checkboxes = $(this).closest(‘form‘)
               .find(‘input[name="chkPerson"]:checkbox‘);

    if($(this).is(‘:checked‘)) {
        checkboxes.prop(‘checked‘, ‘checked‘);
    } else {
        checkboxes.removeAttr(‘checked‘);
    }

});

應該滿好理解，首先找到所有對應的checkbox，判斷我們checkAll是處於勾選還是取消勾選，把這個狀態設定給全部對應的checkbox。

當所有對應checkbox有別勾選的時候，全部勾選checkbox 也要被勾選

另外一個常常遇到的情況是，當對應的所有checkbox被勾選了，checkAll應該也要被勾選：

function 
checkOrRemoveCheckAll()
{
    if($(‘input[name="chkPerson"]:checked‘).length == $(‘input[name="chkPerson"]‘).length)
    {
        $(‘#checkAll‘).prop("checked", "checked");
    }
    else
    {
        $(‘#checkAll‘).removeAttr("checked");
    }
}