天天看點

jQuery對複選框的全選,全不選,反選等的操作

<tr  bgcolor="#FFFFFF">
<td width="18%" height="30" align="center">資源名稱</td>
<td width="82%" colspan="3">
<input type="checkbox" id="all">全選     
<input type="checkbox" id="reverse">反選
</td>
 </tr>
 <tr  bgcolor="#FFFFFF">
<td width="18%" height="30" align="center"> </td>
<td width="82%" colspan="3">
<s:checkboxlist name="resUuids" list="resList" listKey="uuid" listValue="name"></s:checkboxlist>
</td>
</tr>
           
<s:checkboxlist name="resUuids" list="resList" listKey="uuid" listValue="name"></s:checkboxlist>
           

struts 标簽,同普通checkbox标簽

$(function(){
		//全選
		$("#all").click(function(){
			//将下面所有元件全部選中
			//$("[name=resUuids]")	是多個元件,整體是個對象數組
			//$("[name=resUuids]").attr("checked","checked");
			
			//先擷取目前元件的狀态
			//$(this).attr("checked")
			//将所有元件設定為對應狀态
			//$("[name=resUuids]").attr("checked",$(this).attr("checked"));
			
			//$(this).attr("checked")擷取的值究竟是什麼
			//alert($(this).attr("checked"));		//undefined
			//$("[name=resUuids]").attr("checked","undefined");
			
			//js文法規則,除了false,FALSE,"false","FALSE",0五個值之外的所有值,認定為true
			//$("[name=resUuids]").attr("checked",false);
			
			var flag = $(this).attr("checked");
			$("[name=resUuids]").attr("checked",flag == "checked");
		});
		
		//反選
		$("#reverse").click(function(){
			//将所有元件的狀态切換成原始狀态的反狀态
			
			//$("[name=resUuids]").attr("checked",!($("[name=resUuids]").attr("checked")=="checked"));
			
			//當選擇器選中的元件是多個時,擷取元件的任何資料都是對第一個元件進行操作
			//alert(!($("[name=resUuids]").attr("checked")=="checked"));
			
			//對每個元件進行疊代,讓其操作狀态為對應元件的原始狀态的反狀态
			$("[name=resUuids]").each(function(){
				//使用each操作實作對每個元件的操作
				var flag = $(this).attr("checked"); 
				$(this).attr("checked", !(flag =="checked"));
			});
			checkSelect();
		});
		
		//綁定元件
		$("[name=resUuids]").click(function(){
			//将全選的狀态設定為基于所有元件的綜合狀态值
			checkSelect();
		});
		
		function checkSelect(){
			var allFlag = true;
			$("[name=resUuids]").each(function(){
				var flag = $(this).attr("checked") == "checked";
				//&:位運算與	 &&:邏輯與
				allFlag = allFlag && flag; 
			});
			$("#all").attr("checked",allFlag);
		}
		
	});