`
highfly-s
  • 浏览: 100358 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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" />&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>


此种方式效率比较高一些


还有一种方式 如下:而下用的是循环遍历进行比较的,选项比较多的话,会影响到代码的执行效率。这里用到了自定义 属性的方法


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










分享到:
评论

相关推荐

    jquery 实现鼠标单击行时,选中checkbox复选框

    jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框

    jquery实现带复选框的表格行选中删除时高亮显示

    本示例展示了如何利用jQuery实现一个带复选框的表格,使得在选中或删除表格行时能够高亮显示,提升用户体验。下面将详细解释实现这两个功能的关键步骤和涉及的jQuery语法。 首先,我们需要一些基本的HTML结构,包含...

    jsp+js带单选复选框的动态树

    当用户通过单击节点或复选框进行选择时,JavaScript会更新树的状态,并可能触发AJAX请求,将用户的选择同步回服务器。 总的来说,"jsp+js带单选复选框的动态树"是一种结合了前后端技术的动态交互组件,它有效地展示...

    JQuery CheckBox(复选框)操作方法汇总

    主要介绍了JQuery CheckBox(复选框)操作方法汇总,本文讲解了获取单个checkbox选中项、获取多个checkbox选中项、设置第一个checkbox 为选中值、设置最后一个checkbox为选中值等内容,需要的朋友可以参考下

    layui 数据表格复选框实现单选功能的例子

    通过上述步骤,我们能够实现一个在数据表格中,通过单击行来切换复选框选中状态的功能。这样的功能对于提升用户体验和交互的友好性有着重要的意义。 最后,要确保代码的兼容性和可维护性,需要对代码进行适当的优化...

    JQuery操作单选按钮以及复选按钮示例

    该代码段中,`#checkAll`是全选复选框的ID,通过监听它的点击事件,可以改变其他所有复选框的`checked`属性。 ### 小结 通过上述描述,我们可以看出JQuery为操作单选按钮和复选框提供了非常便捷的方法。通过ID、...

    【列表选择】勾选复选框显示选择项(包括全选反选)

    单击“商品列表”下的复选框,在“您选择的商品”下显示选项,取消勾选则移除选项。包括全选,反选功能。 效果图:http://img.my.csdn.net/uploads/201212/19/1355892213_4318.jpg

    checkBox全选

    "checkBox全选"功能是网页交互中的一个重要特性,它允许用户通过单击一个主复选框来一键选中或取消选中所有相关的子复选框。这个功能在数据筛选、表格操作以及多选项设置等场景中非常常见。本文将详细介绍如何实现`...

    layui的table单击行勾选checkbox功能方法

    当用户点击表格的任意一行时,对应的复选框将会被选中或取消选中,实现了单击行即可改变复选框状态的功能,提高了用户体验。 ### 总结 layui的table组件提供了丰富的定制选项和事件处理能力,使得在前端开发中实现...

    jquery实现表格多选,单击颜色加深,再点击颜色还原,隔行换色,源代码

    当用户选择一行时,可以将该行的复选框设置为选中状态,同时记录选中的行。可以创建一个数组来存储选中的行的索引,以便在需要时进行操作。 单击颜色加深和再点击颜色还原的效果可以通过CSS类的切换来实现。我们...

    如何使html复选框的文本可单击(例如ASP.NET控件)

    一个复选框通常与`&lt;label&gt;`元素结合使用,以便将文本与复选框关联起来。这可以通过设置`for`属性与复选框的`id`匹配来实现。例如: ```html 复选框文本 ``` ### JavaScript/jQuery 实现 为了使文本可点击并影响...

    jquery判断checkbox(复选框)是否被选中的代码

    代码如下: //是否被选中验证有选中的return true,否return false function ... } 这是一个比较不错的方法,收藏了。下面这个函数是对上面的补充: 代码如下:本来就是这种写法啊。jq1.42的写法。 其次,建议你的逻辑处

    jquery 对table动态操作,以及多选反选功能

    添加一个全选按钮,通过`$('.selectAll').click(function() {...})`监听其点击事件,遍历所有复选框并改变它们的checked状态。 三、实现反选功能 1. 反选逻辑: 当用户点击已选择的项时,可以通过取反当前复选框...

    jQuery 3.3.1.zip

    jQuery是一款免费且开放源代码的JS代码库,由John Resig创建,它是轻量级的js库,兼容CSS3,兼容各种浏览器(IE6.0 , FF1.5 , Safari2.0 , ...恢复:触发器复选框和广播单击事件相同;恢复:添加无线电点击触发测试。

    TreeCheckBox

    用户可以单击节点来展开或折叠树,也可以单击复选框来改变该节点的状态。这种组合使得用户能够以可视化的方式选择多个层次结构中的项目,这对于处理具有复杂关系的数据非常有用。 在实际应用中,TreeCheckBox的常见...

    js实现全选效果

    接下来,我们需要用JavaScript监听全选复选框的`click`事件,然后根据其状态改变子项复选框的状态。这里我们可以使用原生JavaScript或者jQuery库来实现。下面是使用原生JavaScript的例子: ```javascript document....

    超实用的jQuery代码段

    2.12 如何选中页面上的所有复选框 2.13 禁用表单的回车键提交 2.14 禁用右键单击上下文菜单 2.15 IE下禁用文本选择功能 2.16 输入框获取焦点时文本高亮提示 2.17 实现多个输入框同步操作 2.18 在新窗口中打开外部...

    下拉伸缩效果带复选框(开发票).zip

    这是一个使用jQuery插件实现的伸缩效果,在网页上,单击单选按钮,也就是Radio元素后,所属的对应内容向下拉出,伸展开来,平时是不显示的,可用在发票查询等场合。

    选中表格后单击可对表格进行编辑

    "选中表格后单击可对表格进行编辑"这一功能是许多应用程序中的常见特性,它允许用户方便地对表格内容进行快速修改。下面我们将深入探讨这个主题,了解如何操作以及它背后的技术实现。 首先,当我们谈论“单击表格中...

Global site tag (gtag.js) - Google Analytics