jquery单击子复选框改变上一级复选框的状态
<!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>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td scope="col">父选框<input type="checkbox" class="fu1" /> </td>
</tr>
<tr>
<td>苹果<input type="checkbox" class="zi1" /></td>
</tr>
<tr>
<td>香蕉<input type="checkbox" class="zi1" /></td>
</tr>
<tr>
<td>桔子<input type="checkbox" class="zi1" ></td>
</tr>
<tr>
<td scope="col">父选框<input type="checkbox" class="fu2" /> </td>
</tr>
<tr>
<td>苹果<input type="checkbox" class="zi2" /></td>
</tr>
<tr>
<td>香蕉<input type="checkbox" class="zi2" /></td>
</tr>
<tr>
<td>桔子<input type="checkbox" class="zi2"></td>
</tr>
</table>
</body>
</html>
此种方式效率比较高一些
还有一种方式 如下：而下用的是循环遍历进行比较的，选项比较多的话，会影响到代码的执行效率。这里用到了自定义 属性的方法
<!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>无标题文档</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
$('[type=checkbox]').click(function (){
$('.fu').each(function(){
var sign = $(this).attr('sign');
var flag = true;
$('.zi'+sign).each(function(){
//alert($(this).attr('names'));
if($(this).attr("checked")){
//alert('aaa');
//alert("dddd"+sign );
flag= false;
}
});
if(flag){
//alert($(this).attr('checked'));
$(this).attr('checked',false);
//alert("dddd"+sign );
flag= true;
} else {
$(this).attr('checked',true);
flag= true;
}
});}) ;
});
</script>.
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td scope="col">父选框<input type="checkbox" class="fu" sign="1"/> </td>
</tr>
<tr>
<td>苹果<input type="checkbox" class="zi1" names="苹果"/></td>
</tr>
<tr>
<td>香蕉<input type="checkbox" class="zi1" names="香蕉"/></td>
</tr>
<tr>
<td>桔子<input type="checkbox" class="zi1" names="桔子"/></td>
</tr>
<tr>
<td scope="col">父选框<input type="checkbox" class="fu" sign="2"/> </td>
</tr>
<tr>
<td>苹果<input type="checkbox" class="zi2" names="苹果"/></td>
</tr>
<tr>
<td>香蕉<input type="checkbox" class="zi2" names="香蕉" /></td>
</tr>
<tr>
<td>桔子<input type="checkbox" class="zi2" names="桔子"></td>
</tr>
</table>
</body>
</html>
作者“highfly-s”
上一篇： Oracle数据库子查询实例教程
下一篇： jsp源码实例1（输出）