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

最新推荐文章于 2022-10-11 05:45:00 发布
最新推荐文章于 2022-10-11 05:45:00 发布
阅读量202 收藏
点赞数
分类专栏： WEB前端 文章标签： jquery 在属性选择器中传值 变量 复选框 点击子选框 触动父复选框的状态 jquery javascript ViewUI
<!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>
孤长风
关注
专栏目录
JS实现选中一级复选框相关二级或父级同时被选
12-03
JS实现选中一级复选框相关二级或父级同时被选;子级全部选中，父级自动选中；父级选中，子级全部选中。做权限功能可用到。html页面。
选中多选框时改变相对应的包裹复选框的元素样式
weixin_34138521的博客
12-20 208
首先 有这样的一个效果： 即选中复选框的时候，相对应的li将改变背景色等样式，完整的实现效果主要代码如下 原始html文件 <div class="check"> <h5>症状（可多选）</h5> <ul class="flex"> <l...
js 获取复选框 和 并改变状态
weixin_30527423的博客
03-14 212
function checkAll() { var checkbox = document.getElementById('vegeids');// var boxes = document.getElementsByName("vegeid"); if(checkbox.checked){ ...
html中如果勾选总复选框其他复选框状态随之更改
猫的薛定谔
04-10 3753
页面效果 目的 点击1复习框，则复选框2的状态都随之改变 html标签语言界面编写 1是为了点击此复选框跳转到响应函数selectAll,在此响应函数下定义其他复选框状态更改 2是设置其他复习框的class属性值都相同，为了更改状态时统一操作 复选框状态响应函数 2就是跳转的函数 3表示：对class属性值为itemSelect元素，进行元素属性值更改，把checked...
JS实现改变复选框选中行中指定单元格背景色(状态改变事件)
DN_XIAOXIAO的博客
09-19 1420
控件事件-https://help.finereport.com/doc-view-1176.html 状态改变事件：单选按钮组件、复选按钮组件、单远框、复选框 JS代码：状态改变事件： var value = this.getValue(); if(value)//很简单，若x为真，那么!x为假。if（x）等价于if（true）,if(!x)等价于（false） { $('td[id^=H...
jquery实现带复选框的表格行选中删除时高亮显示
12-12
本示例展示了如何利用jQuery实现一个带复选框的表格，使得在选中或删除表格行时能够高亮显示，提升用户体验。下面将详细解释实现这两个功能的关键步骤和涉及的jQuery语法。 首先，我们需要一些基本的HTML结构，包含...
JQuery CheckBox（复选框）操作方法汇总
10-24
主要介绍了JQuery CheckBox（复选框）操作方法汇总,本文讲解了获取单个checkbox选中项、获取多个checkbox选中项、设置第一个checkbox 为选中值、设置最后一个checkbox为选中值等内容,需要的朋友可以参考下
jquery判断checkbox(复选框)是否被选中的代码
01-19
代码如下: //是否被选中验证有选中的return true,否return false function ... } 这是一个比较不错的方法，收藏了。下面这个函数是对上面的补充： 代码如下:本来就是这种写法啊。jq1.42的写法。 其次，建议你的逻辑处
layui 数据表格复选框实现单选功能的例子
10-16
通过上述步骤，我们能够实现一个在数据表格中，通过单击行来切换复选框选中状态的功能。这样的功能对于提升用户体验和交互的友好性有着重要的意义。 最后，要确保代码的兼容性和可维护性，需要对代码进行适当的优化...
js给name是变量的复选框改变状态
weixin_47164415的博客
10-11 312
js给name是变量的复选框改变状态
jquery复选框思路
sjk1220的博客
01-13 175
复选框的思路 复选框的主要问题就是多个框以及父子框之间的联系以及因果关系,然后编写时有两个思路。 先暂写一个思路一，剩下的下次再补 源码 <ul id="tree"> <li><input type="checkbox" value="1">1 <ul> <li> ...
jq实现复选框全选和反全选以及子复选框的状态改变父复选框状态的方法
wangle_style的博客
11-14 807
内容
关于复选框的实用效果
johncools的博客
07-05 1289
再很多网站里这都是一个很常见的效果，就是点击总分类的复选框，自动选择所有子分类的复选框，或者如果子分类的所有复选框全部被选中则总分类复选框也自动被选中。这次偶时再msn的网站上偶然看到的，于是自己也试着写了下，代码如下：DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xh
如何用JS控制复选框选中,element.checked
热门推荐
NNNaix的博客
02-03 4万+
整体简介 Html元素中的checkbox和radio有一个checked的属性，可以用来设置对应元素的选中状态。当元素具有该checked属性时表示选中，否则表示未选中。 所需工具/原料 原生javascript. 方法/步骤 1) 通过js的元素选择器选择对应的元素DOM对象，如通过通过元素ID方式获: var el = do
JQuery datatables 表头复选框切换页面时保持选中的问题解决
你好邱林和的专栏
10-30 6394
在使用强大的datatables表格插件时,发现,发现如果在表头添加了复选框之后,当第一页选中,点击切换下一页的时候,复选框还是选中的状态,这个是不对的,需要找一个监听表格绘制完成的函数,重新设置checkbox为未选中,可以加入如下方式: //切换下一页更新复选框的状态为不选中 "fnDrawCallback": function() {
checkbox选中父级父级跟随选中
PHP开光程序员的博客
06-20 693
$(function(){ $('[level=1]').click(function(){ if(this.checked){ $(this).parent().find('input').prop('checked','checked'); } else{ $(this).parent()...
Jquery实现点击某一checkbox时，value类似的checkbox也选中
奋斗吧程序猿
02-27 2902
script type="text/jscript"> //点击某checkbox时，把相关的上传文件及生成文件一并删除。2012.2.15 jb $(document).ready(function(){      $(":checkbox").click(function(){          if(this.checked) {               var id=$
单个复选框选中状态改变时区别传送的数据（小技巧）
qq_38377299的博客
09-27 562
今天在练习代码的时候遇到一个小问题 有个表示状态的的复选框按钮 选中状态时提交有数据显示 而没有选中时候就没有数据传输了  为了在获取数据的时候对其的选中状态做出判断 ，可以在表单的最前面加上一个隐藏域 在复选框的value中添加选中时候传送的值 当没有选中该复选框的时候 隐藏域会发送0值。 当复选框被选中的时候 复选框的value值就会覆盖这个隐藏域发送的值 从而达到
jquery 复选框 一行三个
最新发布
07-25
1. **事件处理**：当单击任一复选框时，会检测其所在的行索引，然后改变该行内所有复选框的状态。 2. **获取行内复选框值**：点击一个按钮触发事件，找到当前活动的复选框所在的行，然后收集并显示这一行内已选中复...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值