JQuery實現的 checkbox 全選、反選。

發現網上寫的全選的代碼，不是完整的，是有bug的。全選它分幾種情況

1. 全選的checkbox選中時，子checkbox全部選中。反之，全部不選

2.子checkbox中，只要有沒有被選中的，取消全選checkbox的選中

3.子checkbox的數量和子checkbox被選中的數量一樣時，全選checkbox要被選中

//複選框事件
//全選、取消全選的事件
function selectAll(){
	if ($("#SelectAll").attr("checked")) {
		$(":checkbox").attr("checked", true);
	} else {
		$(":checkbox").attr("checked", false);
	}
}
//子複選框的事件
function setSelectAll(){
	//當沒有選中某個子複選框時，SelectAll取消選中
	if (!$("#subcheck").checked) {
		$("#SelectAll").attr("checked", false);
	}
	var chsub = $("input[type='checkbox'][id='subcheck']").length; //獲取subcheck的個數
	var checkedsub = $("input[type='checkbox'][id='subcheck']:checked").length; //獲取選中的subcheck的個數
	if (checkedsub == chsub) {
		$("#SelectAll").attr("checked", true);
	}
}

全選checkbox的id是SelectAll，子checkbox的id是subcheck。

如果頁面還有別的checkbox，selectAll方法裏面稍作修改。

JSP頁面代碼如下：

<input type="checkbox" id="SelectAll"  value="全選" οnclick="selectAll();"/>

<input type="checkbox" id="subcheck"  value="1" οnclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="2" οnclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="3" οnclick="setSelectAll();"/>
<input type="checkbox" id="subcheck"  value="4" οnclick="setSelectAll();"/>