用 JQuery 判斷 checkbox 是否選取，並實作全選與取消全選

這次要介紹的是使用 JQuery 來對多個 checkbox 做取值得動作，並實作全選與取消全選的動作。
首先是 checkbox 群組在 Html 部分:

1. <input name='checkboxGroup' type='checkbox' value='1'> 1
2. <input name='checkboxGroup' type='checkbox' value='2'> 2
3. <input name='checkboxGroup' type='checkbox' value='3'> 3
4. <input id='clickAll' type='checkbox'> 全選

接著是 jQuery 部份:

1. $("#clickAll").click(function() {
2.     if ( $("#clickAll").prop("checked") ) {
3.         $("input[name='checkboxGroup']").each(function() {
4.             $(this).prop("checked", true);
5.         });
6.     }  //  if  全選的checkbox被勾選
7.     else {
8.         $("input[name='checkboxGroup']").each(function() {
9.             $(this).prop("checked", false);
10.         }); 
11.     }  //  else  全選的checkbox被取消勾選
12. });

至於如果需要 Submit 表單的時候要如何知道哪些被勾選就如下段程式碼:

1. var  ids = new Array();
2. 
   
3. $("input[name='checkboxGroup']:checked").each(function(){
4.   ids.push($(this).val());
5. });  //  得到被勾選項目的Array

要特別注意的地方是，checkbox 在沒有勾選的時候是不會傳 value 的，有勾選才會傳 value，以及它可以像 radio 群組一樣使用 name 來區分所在的群組。