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

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

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

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

前言

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

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

  1. 勾選/取消勾選 全部勾選checkbox的時候 勾選/取消勾選 所有對應的checkbox
  2. 當所有對應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");
	}
}

這個其實也滿好理解,我們先取得所有有勾選的checkbox數字,對比所有checkbox的總數字。

如果一致,表示所有被勾選了,因此checkAll也要勾選,如果不一致,表示checkAll不需要被勾選。

完整程式碼範例

JS Bin

點部落 的標籤: ,

Google+

創用 CC 授權條款
Alan Tsai 的隨手筆記Alan Tsai製作,以創用CC 姓名標示 4.0 國際 授權條款釋出。