JS：支援任意數量的分組checkbox全選功能（幾種方法的比較）
用JQ寫的支援任意數量的分組checkbox全選功能的超短程式碼,特點有兩個,一是短,二是擴充套件容易,不需要改動JS,只需要複製一組之後按照命名規則改下編號.
(為書寫簡便，以下都省略了checkbox的value，實際應用中，這當然是必須的，請自行注意新增)
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<input id=CheckAll1 type="checkbox">全選第一組
<input name=subBox1 type="checkbox">1
<input name=subBox1 type="checkbox">2
<input name=subBox1 type="checkbox">3
<input id=CheckAll2 type="checkbox">全選第二組
<input name=subBox2 type="checkbox">1
<input name=subBox2 type="checkbox">2
<input name=subBox2 type="checkbox">3
<script type="text/javascript">
$(function() {
$("[id^='CheckAll']").click(function() {
var flag = $(this).attr("checked");
var n=$(this).attr('id').replace('CheckAll','');
$("[name=subBox"+n+"]:checkbox").each(function() {
$(this).attr("checked", flag);
})
})
})
</script>
但是，上面的程式碼，有個明顯缺陷，就是各個分組的name都是同樣的字首加序號，而實際使用中，往往是需要給各分組設定完全不同意義的名稱，比如設定成資料庫中表欄位的名稱，以有利於程式碼可讀性。
那麼，換種思路，無視各分組的名稱，按“全選”框的位置，取其後面或前面的複選框名稱，就按這個名稱取所有叫這個名的複選框就可以得到該分組的所有複選框了。
但是，在佈局固定為上面那種形式時，這是可行的，但如果佈局有較大差異，比如，先橫排幾個“全選”按鈕，然後在下方再排幾個分組，這種時候，如果不採取CSS控制位置，只按照自然的順序，那麼取值和設定就會出錯了。
再換一種方法，把各分組的name放在一個JS數組裡，這樣是可行的。
但這個程式碼就不寫了，因為，還是感覺這樣有點麻煩。
最終，還是回到了和第一種類似的思路，仍然利用名稱替換過濾，但是表現就比較不同了，等於說，開始的程式碼相當於實驗產品，不具有什麼實用性，而這個才是具有實用性的產物。
１.在名稱上，既令各分組可以使用各自有意義的不同名稱，也使全選框的名稱變得更有指示意義。
２.利用事件冒泡機制，監聽上層物件，而不對下面具體的篩選框進行逐個監聽。
３.程式碼長度，基本差不多，只是因為添了註釋，看來比較多。
４.使用規則只有一條，全選框的name必須起名為“ChkAll_所管理的分組的name”，當然，如果發生名稱衝突的話，這個“ChkAll_”在下面的JS裡是可以更改的，就是var chkAllName="ChkAll_"; 這一行。
<input name="ChkAll_Dept" type="checkbox">全選第一組
<input name="Dept" type="checkbox">開發
<input name="Dept" type="checkbox">市場
<input name="Dept" type="checkbox">財務
<input name="Dept" type="checkbox">管理
<br/>
<input name="ChkAll_Employee" type="checkbox">全選第二組
<input name="Employee" type="checkbox">張三
<input name="Employee" type="checkbox">李四
<input name="Employee" type="checkbox">王五
<!--其它類似新增-->
<script type="text/javascript">
$(function() {
var chkAllName="ChkAll_"; /*“全選”複選框的name標記*/
$(document).click(function(e){/*利用事件冒泡機制,只對上層物件進行事件監聽*/
var tmpName=e.target.name; /*冒泡點名*/
if(tmpName.indexOf(chkAllName)>-1){/*如果具有全選框的名稱標記,代表是全選框*/
var flag=e.target.checked;/*取該全選框的狀態*/
/*過濾掉共同的名稱標記部分,剩下部分就可標識是用於管理哪個分組,對該分組遍歷設定狀態*/
$("[name=" + tmpName.replace(chkAllName,"")+ "]:checkbox").each(function() {
this.checked=flag;
})
}
});
});
</script>