<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);
}
});