js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果
HTML
<tr>
<td>
<label>
<input name="rules[]" value="15" checked="checked" dataid="id-15" class="inverted checkbox-parent " type="checkbox">
<span style="font-weight:bold; font-size:14px;" class="text">管理员</span>
</label>
</td>
<tr>
<td>
<label>
<input name="rules[]" value="16" checked="checked" dataid="id-15-16" class="inverted checkbox-parent checkbox-child " type="checkbox">
<span class="text">管理员列表</span>
</label>
</td>
</tr>
</tr>
<tr>
<td>
<label>
<input name="rules[]" value="19" checked="checked" dataid="id-15-16-19" class="inverted checkbox-parent checkbox-child " type="checkbox">
<span class="text">管理员修改</span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input name="rules[]" value="18" checked="checked" dataid="id-15-16-18" class="inverted checkbox-parent checkbox-child " type="checkbox">
<span class="text">管理员删除</span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input name="rules[]" value="17" checked="checked" dataid="id-15-16-17" class="inverted checkbox-parent checkbox-child " type="checkbox">
<span class="text">管理员添加</span>
</label>
</td>
</tr>
JS代码
<script type="text/javascript">
/* 权限配置 */
$(function() {
//动态选择框,上下级选中状态变化
//选中父级,所有子级也选中
$('input.checkbox-parent').on('change', function() {
//动态选择框,上下级选中状态变化
var dataid = $(this).attr("dataid");
console.log(dataid);
$('input[dataid^=' + dataid + ']').prop('checked', $(this).is(':checked'));
//[dataid^=value]匹配指定属性以value开始的input元素,和正则^以xx开始相似
//prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。
//is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。
}); //子级选择状态
$('input.checkbox-child').on('change', function() {
//获取子元素的dataid值
var dataid = $(this).attr("dataid");
//截取子元素的dataid值以最后一个“-”为终
dataid = dataid.substring(0, dataid.lastIndexOf("-"));
var parent = $('input[dataid=' + dataid + ']');
if($(this).is(':checked')) {
parent.prop('checked', true);
//循环到顶级
while(dataid.lastIndexOf("-") != 2) {
dataid = dataid.substring(0, dataid.lastIndexOf("-"));
parent = $('input[dataid=' + dataid + ']');
parent.prop('checked', true);
}
} else {
//没子元素勾选,父级也取消勾选
//父级
if($('input[dataid^=' + dataid + '-]:checked').length == 0) {
parent.prop('checked', false);
//循环到顶级
while(dataid.lastIndexOf("-") != 2) {
dataid = dataid.substring(0, dataid.lastIndexOf("-"));
parent = $('input[dataid=' + dataid + ']');
if($('input[dataid^=' + dataid + '-]:checked').length == 0) {
parent.prop('checked', false);
}
}
}
}
});
});
</script>
js input复选框选中父级同时子级也选中的更多相关文章
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js实现复选框的全选、全不选和反选
js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...
- js操作复选框 复选框
//复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']&quo ...
- js操作复选框
js操作复选框 JavaScript 代码: //复选框全选 $(function () { $("#select_all").click(function () { $(&quo ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
- js实现复选框的全选、全不选、反选
js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- jQuery获取input复选框的值
var ipResolveValue =[]; //定义一个空数组$("input[name='ipResolve']:checked").each(function(){ / ...
随机推荐
- Spring IOC容器解析及实现原理
最近一段时间,“容器”两个字一直萦绕在我的耳边,甚至是吃饭.睡觉的时候都在我脑子里蹦来蹦去的.随着这些天一次次的交流.讨论,对于容器的理解也逐渐加深.理论上的东西终归要落实到实践,今天就借助sprin ...
- 不设置JAVA_HOME运行eclipse
编辑eclipse目录下的eclipse.ini 在第一行加入下面那句话,实际路径按照系统中的jdk目录设置.这样设置后可以省了环境中的JAVA_HOME像myeclipse一样. -vm C:\ ...
- Linux下遇到的操作 (持续更新……)
1.作业让写一个输入输出重定向,管道联接.这里要讲的不是这个而是 我当时想写个程序来演示这些功能:但我发现我的虚拟机中没有装GNU不能用g++命令,然后就惊奇的发现Linux命令行可以直接联网下载安装 ...
- ubuntu重新安装 apache2
$ sudo apt-get --purge remove apache2 $ sudo apt-get --purge remove apache2.2-common $ sudo apt-get ...
- 控制某个panel的display样式
"我想在onload方法里把panel的 style 里的 display 属性变成 none.我的页面由于有一些脚本,触发某些事件之后还想显示这个panel,不想用Panel3.Visib ...
- javascript javascript加载类似星座、血型的函数
javascript加载类似星座.血型的函数 //加载血型 function bloodtypelaod(constellation) { var obj = document.getElement ...
- ubuntu - 14.04,必须会的技能-安装PPA源中的程序,更大范围使用deb格式安装文件!!
在使用ubuntu时候,管理各种软件最方便的方式肯定是使用软件中心了,这个管理工具类似windows的 程序管理了,使用它有两个好处: 1,无需处理包依赖,linux里面程序存在各种依赖关系,这在以往 ...
- JavaScript高级知识点整理
一.JS中的数组 1.数组的三种定义方式 (1).实例化对象 var aArray=new Array(1,2,3,4,5); (2).快捷创建 var aTwoArray = [1,2,3,&quo ...
- 【沽泡学院07】基于ElasticSearch搜索附近的人
1. 为什么要选择ElasticSearch 1)ElasticSearch 优点: 分布式.实时的.Push replication 完全支持Apache Lucene的接近实时的搜索 处理多租户( ...
- 阿里云linux安装jmeter并进行压测
一.阿里云linux安装JDK 1.下载安装JDK jdk官网,选择linux版本,下载并保存. (一)yum安装 安装epel的yumyuan yum install epel-release -y ...