您现在的位置:计算机技术学习网 > 技术中心 > WEB编程 > JSP >

jquery单击子复选框改变上一级复选框的状态

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 19:02 点击:

<!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" />&nbsp;</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" />&nbsp;</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>


此种方式效率比较高一些


还有一种方式 如下:而下用的是循环遍历进行比较的,选项比较多的话,

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • JSP与Servlet
      • 自己动手写MiniBBS系列(基本篇)之用户登录
      • JSP取当前日期
      • JDBC 入门(一)
      • 打开一个jsp页面默认查询所有数据,调用action
      • 使用JSP标签库验证用户的输入(2)完
      • 自定义JSP标签(tag)浅议
      • WIN98/2000下的jsp服务器
      • JSP内建对象(二)
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1