复选框的子级和父级间的逻辑

a.父级选中 子级都选中

b.子级一个选中 父级就选中

c.全选或者全部选中

<script type="text/javascript">
$(function(){
$("#checkedAll").click(function(){
var flag = this.checked;
$(":checkbox[name=‘items‘]").attr("checked", flag);
});

$(":checkbox[name=‘items‘]").click(function(){
var _cbClass = $(this).attr(‘class‘); //获取父级的class元素
if(_cbClass){//判断是否有元素,有的话则是父级复选框
var _isChecked = $(this).is(":checked"); //获取是否选中
$(":checkbox[pid=‘"+_cbClass+"‘]").attr("checked",_isChecked);//根据父级是否选中的状态设置子级的状态
}else{//操作子级复选框
var _pid = $(this).attr(‘pid‘);//获取pid的值
if($("input[pid="+_pid+"]").is(":checked")==true){
$(":checkbox[class=‘"+_pid+"‘]").attr("checked",true);//判断子级是否有选中,有的话父级选中
}else{
$(":checkbox[class=‘"+_pid+"‘]").attr("checked",false);
}
}

});

});

</script>

html部分:

<body>

<form method="post" action="">
<div style="margin-left:30px;">权限设置
<input type="checkbox" id="checkedAll" />全选/全不选
<div style="border:solid 1px #ebebeb; padding-left:70px; padding-top:20px; margin-top:15px;">

<input type="checkbox" name="items" class="id_1"/><span style="font-size:18px; color:#36F;">广州</span>
<ul>
<li><input type="checkbox" name="items" pid="id_1"/>白云区</li>
<li><input type="checkbox" name="items" pid="id_1"/>越秀区</li>

</ul>

<input type="checkbox"name="items" class="id_2" /><span style="font-size:18px; color:#36F;">北京</span>
<ul>
<li><input type="checkbox" name="items" pid="id_2"/>白云区</li>
<li><input type="checkbox" name="items" pid="id_2"/>白云区</li>
</ul>
</div>
</div>
</form>

</body>

时间: 2024-07-30 10:19:12

复选框的子级和父级间的逻辑的相关文章

checkbox全选/全不选,子复选框全选父复选框选中

<input type="checkbox" class="optionListAll">/* 父复选框 */ <input type="checkbox" name="optionList"> <input type="checkbox" name="optionList"> <input type="checkbox" n

使用CSS3制作酷炫防苹果复选框 自行测试!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:#eee; } .lbl{ /*复选框背景色*/ height:20px; width:50px; display:block;/*元素将显示为块级元素*/ ba

js实现多级复选框的交互

功能介绍 整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断: 1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样. 2要判断它是否有父级,有父级勾选时判断同级兄弟是否都是选中状态,如果选中将父级勾选上:取消勾选时将父级的勾选状态变为false 复选框交互要实现的效果如下: 实现思路说明 1.设计一种方式让我们知道谁是自己的父级谁是自己的子级.我是用的<input>的name和id值标识的.子级的name值等于父级的id值 2.checkone

Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有mvc的特点). 1. QStandardItemModel在QTreeView中的使用 使用QTreeView的对应模型是QStandardItemModel,这个是Qt对应ui界面最有用的模型,它可以用于树形控件.列表控件.表格控件等等和条目有关的控件.QStandardItemModel用于列表

DevExpress XtraTreeList TreeList复选框选择

权限管理涉及复选框多勾选. 1.控件属性设置 TreeList.OperationView.ShowCheckBoxes=true;用于显示CheckBox: TreeList.OperationBehavior.AllowIndeterminateCheckState=true;  设置CheckBox允许第三种状态. 2.控件事件绑定 要实现选择父级节点选择.子级节点全部选中.父级节点未选择.反之.子级节点部分选中.父级节点为第三种状态. private void treeList1_Aft

CSS 美化复选框 - 无图片方式

今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> <input type="checkbox" class="icheck" id="icheck" /> <label for="icheck" class="ilabel"></lab

ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中(一)

ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中,这个问题分一下几步走 1.将弹出框真分页后复选框选择的数据保存. 2.将弹出框保存的数据传到父页面上. 3.将数据在父页面上显示. 4.点击保存将信息存入数据库中. 首先来第一步将弹出框真分页后复选框选择的数据保存. 思路很简单就是先真分页,然后在点击下一页的时候扫描这一页所有点击复选框的数据保存到一个变量数组中.下面就是主要代码: ASP代码: <%@ Page Language="C#" AutoEventWire

dojo中创建包含节点复选框的树形(CheckBoxTree)

树形结构是界面设计程中常见的部件,在代码实现时有很多方法,但由于设计到节点的父子关系和dom节点操作,实现起来比较复杂.dojo中提供了带复选框的树形部件CheckBoxTree,使用时只需创建对应的实例即可轻松实现此功能. 部件对应的html文件代码如下: <div> <div dojoType="dijit.Dialog" dojoAttachPoint="testList" title="${title}" style=&

easyui_tree 复选框 动态加载树

controller动态获取单位用户树 #region 下拉树菜单 /// <summary> /// 获取工作人员树菜单 /// </summary> /// <param name="addid"></param> /// <param name="unitid"></param> /// <returns></returns> public string GetUs