程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> jquery單擊子復選框改變上一級復選框的狀態

jquery單擊子復選框改變上一級復選框的狀態

編輯：關於JSP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 在屬性中傳變量 </title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var zc="zi".length; //zi在類屬性class標識是子復選框復到字符串的長度和標識的 fu 長度是一樣的在這裡共用一個
checkbox.click(function() { //單擊復選框觸發事件函數
var checkbox=$(this);
var name=$(this).attr("class");
var b1=name.substring(zc,name.length); //得到所單擊的這個復選框後綴的數字組合
var bb=$(this).attr("checked");         //判斷選中或未選中 true or false
var b="fu"+b1;                         //父復選框class 的組合
var a = "zi"+b1;                       //子復選框class的組合
var b22=$('td input[class="'+b+'"]');   //鏈接字符得到父復選框此用的是屬性選擇器
if(bb==true){
$(b22[0]).attr("checked",true);    //當被選中的時候父的復選框也會選中
}else if(bb==false){

var box=$('td input[class="'+a+'"]:checked'); //取消選中會判斷還有被選中的個數等於零時父的復選框取消選中大於零時選中
var cd=box.length;

if(cd==0){
$(b22[0]).attr("checked",false);
}else if(cd>0){
$(b22[0]).attr("checked",true);
}
}

});
});
</script>.
</head>

</body>
</html>

此種方式效率比較高一些

還有一種方式如下：而下用的是循環遍歷進行比較的，選項比較多的話，會影響到代碼的執行效率。這裡用到了自定義屬性的方法

}

});
if(flag){
//alert($(this).attr('checked'));
$(this).attr('checked',false);
//alert("dddd"+sign );
flag= true;
} else {
$(this).attr('checked',true);
flag= true;
}

});}) ;

});
</script>.
</head>