树checkbox选择jquery实例
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://my.csdn.net/assets2/js/libs/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[type='checkbox']").click(function () {
var myid = $(this).attr("id");
//alert(myid);
var isSel = $(this).is(":checked");
selectChkbox(0, myid, isSel);
selectParentChkbox($(this));
});
});
//变更子节点
function selectChkbox(n,parentid, isSel) {
var len = $("input[type='checkbox']").length;
for (var i = n; i < len; i++) {
var inp = $("input[type='checkbox']").eq(i);
var pid = inp.attr("data-parent");
if (parentid == pid) {
if (isSel) {
inp.prop("checked", true);
} else {
inp.prop("checked", false);
}
selectChkbox(i, inp.attr("id"), isSel);
}
}
}
//变更父节点
function selectParentChkbox(clickINP) {
var parentid = clickINP.attr("data-parent");
if (parentid != "null") {
if (!clickINP.is(":checked")) {
selectParentChkF(parentid);
} else {
selectParentChkT(parentid);
}
} }
function selectParentChkF(parentid) {
$("#" + parentid).prop("checked", false);
parentid = $("#" + parentid).attr("data-parent");
if (parentid != "null")
selectParentChkF(parentid);
}
function selectParentChkT(parentid) {
var parentSel = true;
$("input[type='checkbox']").each(function () {
var pid = $(this).attr("data-parent");
if (parentid == pid) {
if (!$(this).is(":checked")) {
parentSel = false;
}
}
});
if (parentSel) {
$("#" + parentid).prop("checked", true);
parentid = $("#" + parentid).attr("data-parent");
if (parentid != "null")
selectParentChkT(parentid);
} else {
selectParentChkF(parentid);
}
}
</script>
</head> <body>
<div>
<div>A<input id="A" data-parent="null" type="checkbox" /></div>
<div style=" margin-left:16px;">B<input id="B" data-parent="A" type="checkbox" /></div>
<div style=" margin-left:32px;">B-1<input id="B-1" data-parent="B" type="checkbox" /></div>
<div style=" margin-left:32px;">B-2<input id="B-2" data-parent="B" type="checkbox" /></div>
<div style=" margin-left:48px;">B-2-1<input id="B-2-1" data-parent="B-2" type="checkbox" /></div>
<div style=" margin-left:48px;">B-2-2<input id="B-2-2" data-parent="B-2" type="checkbox" /></div>
<div style=" margin-left:16px;">C<input id="C" data-parent="A" type="checkbox" /></div>
<div style=" margin-left:32px;">D<input id="D" data-parent="C" type="checkbox" /></div>
<div style=" margin-left:32px;">E<input id="E" data-parent="C" type="checkbox" /></div>
</div>
</body>
</html>
树checkbox选择jquery实例的更多相关文章
- 转：zTree树控件入门之checkbox：如何动态设置节点的checkbox选择框启用与禁用状态（chkDisabled)
当一棵树的部分节点根据登入用户角色不同而决定是否启用节点前的checkbox选择框的时候,我们应该如何做呢?也或者如何在页面加载的时候动态根据当前登入用户角色动态切换节点前的checkbox的禁用状态 ...
- checkbox全选，反选，取消选择 jquery
checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...
- 基础 jQuery 实例
基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined
jQuery实例--jQuery实现联动下拉列表查询框 在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...
- cocos2dx2.2.2登录场景中Checkbox选择框的实现
在前两篇文章中,我们介绍了在注册场景中需要用到的输入框及弹出框的实现方式,这两篇文章中介绍的内容在登录场景同样会用到.而我们经常会在登录场景中见到的另一种元素就是自动登录或者记住密码的Checkbox ...
- jQuery使用（十一）：jQuery实例遍历与索引
each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- JQuery中_Radio、DropDownList、Checkbox选择控件的处理
Radio 1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").v ...
随机推荐
- 微信网页授权操作逻辑封装-C#实例
http://blog.csdn.net/u011127019/article/details/52650619
- QueryTask,FindTask,IdentifyTask三种查询的区别
1:QueryTask是一个进行空间和属性查询的功能类,它可以在某个地图服务的某个子图层内进行查询,顺便需要提一下的是,QueryTask进行查询的地图服务并不必项加载到Map中进行显示.QueryT ...
- CF959D Mahmoud and Ehab and another array construction task 数学
Mahmoud has an array a consisting of n integers. He asked Ehab to find another array b of the same l ...
- kuangbin专题十六 KMP&&扩展KMP POJ2406 Power Strings
Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...
- kuangbin专题十二 POJ3186 Treats for the Cows （区间dp）
Treats for the Cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7949 Accepted: 42 ...
- VS2008 生成的程序有管理员权限
vs 2008 . 解决方案---右键属性----连接器---清单文件---UAC执行级别---设置为requireAdministrator
- C语言利用指针排序与选择排序算法
//读入字符串,并排序字符串 #include <stdio.h> #include <string.h> #define SIZE 81 #define LIM 20 #de ...
- CodeForces - 593A -2Char（思维+暴力枚举）
Andrew often reads articles in his favorite magazine 2Char. The main feature of these articles is th ...
- shell编程上
1.1 前言 1.1.1 为什么学Shell Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, Linux/UNIX系统的底层及基础应用软件的核心大都涉及Shel ...
- 技巧：Ubuntu踩坑记之网络配置哪里找
今天在虚拟机中遇到一个关于网络配置的坑,在此记录下来. 我们都知道虚拟机系统(此处指的是vmware)中,虚拟网络主要由三个方式实现: 桥接网络 NAT转换 主机共享网络 在这三种方式下,一般我们使用 ...