全选、取消、2级 checkbox的选中切换
需求:点击父级checkbox的时候,子级出现全选或全取消;点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中;如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未选中状态;
HTML代码:
<dl class="set-list">
<dt>
<input type="checkbox" name="plateName" value="18" checked>
百事通</dt>
<dd>
<input type="checkbox" name="channelName18" value="22" checked>
找工作</dd>
<dd>
<input type="checkbox" name="channelName18" value="23" checked>
新楼盘</dd>
<dd>
<input type="checkbox" name="channelName18" value="26" checked>
找房子</dd>
<dd>
<input type="checkbox" name="channelName18" value="27" checked>
二手交易</dd>
<dd>
<input type="checkbox" name="channelName18" value="28" checked>
生活服务</dd>
<dd>
<input type="checkbox" name="channelName18" value="29" checked>
同城交友</dd>
<dd>
<input type="checkbox" name="channelName18" value="30" checked>
宠物服务</dd>
<dd>
<input type="checkbox" name="channelName18" value="31" checked>
车辆买卖</dd>
</dl>
全选或取消:
$("dt input[name=plateName]").click(function () {
var c = $(this).attr("checked");
if ($(this).is(":checked")) {
$(this).parent().siblings("dd").find("input[type=checkbox]").attr("checked", "checked");
} else {
$(this).parent().siblings().find("input[type=checkbox]").removeAttr("checked");
}
});
点击第一个或最后一个子级,改变父级checkbox的勾选状态:
$("dl.set-list dd").click(function () {
var t = 0;//为选中
if ($(this).children().is(":checked")) {
t = 1;
}
var n = 0;
var cond = $(this).parent().children("dd").find("input");
for (var i = 0; i < cond.length; i++) {
if (cond[i].checked == true)
n++;
}
if (n == 0 && t == 0) {
//将父级取消
$(this).siblings("dt").children().removeAttr("checked");
}
if (n == 1 && t == 1) {
//将父级勾选
$(this).siblings("dt").children().attr("checked", "checked");
}
});
这样就可以实现上述,如有其他更简单的方法,望告知;
--记录铭心!
全选、取消、2级 checkbox的选中切换的更多相关文章
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...
- js实现checkbox的全选/取消
所有的操作都将使用jquery进行. 主要是为了实现指定内容的批量/单独删除操作. 先看一下页面的设计. 实现操作的主要地方是: 首先实现单击“标题”旁的checkbox实现所有条目的选择. 要点:j ...
- (转载)jquery实现全选、反选、获得所有选中的checkbox
举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...
- 2016/3/31 ①全选时 下面选项全选中 ② 下面不选中时 全选取消 ③在“” 中 转义字符的使用\ onclick=\"Checkpa(this,'flall')\"; ④区别于分别实现 重点在于两种情况合并实现
testxuanbuxuan.php <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- checkbox全选/取消全选
//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
- (2)Jquery1.8.3快速入门_checkbox全选取消部分选中
1. jquery示例功能: checkbox多选框 全选 .全不选. 选择部分. 源码 : <!DOCTYPE html> <html> <head> <m ...
随机推荐
- awk中gsub的应用
(1)文件filename的内容 cat awk_file 1 2 3 $1,200.00 1 2 3 $2,300.00 1 2 3 $4,000.00 (2)去掉第四列的$和,并汇总第四列的和. ...
- BZOJ 3757: 苹果树
3757: 苹果树 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 1726 Solved: 550[Submit][Status][Discuss] ...
- 【BZOJ-1123】BLO Tarjan 点双连通分量
1123: [POI2008]BLO Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 970 Solved: 408[Submit][Status][ ...
- 求1...n中因子最多的数
Problem 求[1..N]中素因子数最多且最小的数n,N充分大. Solution 将任意自然数n (n>2) 分解 n=p1^k1 * p2^k2 * p3^k3 * ... * Pm^k ...
- JBoss 系列十四:JBoss7/WildFly如何加载外部的文件或properties文件
http://www.tuicool.com/articles/M7ZR3y 原文 http://blog.csdn.net/kylinsoong/article/details/12623997 主 ...
- ionic ios 友盟多渠道/自动签名/加固之腾讯云。乐固
之前写了一篇文章主要是介绍使用gradle进行多渠道分发处理的文章--链接:http://www.cnblogs.com/happen-/p/6029387.html 最近在做app上线的处理,发现某 ...
- 面试web前端开发,被打击了
今天我去面试web前端开发,被打击了,也跟我也有一定的关系,最基础的东西我都没回答好,哎! 主要是我在等我有意向的公司给我发offer,闲着没事,刚好又有公司叫我去面试,我抱着多面一家也没有啥子坏处就 ...
- ngBind ngBindTemplate ngBindHtml
ng-bind: 只能绑定一个变量 在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{titleStr}}</p> 另一种是使用基于属 ...
- debian下NTFS分区无法访问解决
打开终端 # ntfsfix /dev/sda3 (/dev/sda3是上图中划红框的部分,根据实际情况替换) 如果这个磁盘可以正常挂载,说明问题已经解决了,其他磁盘在重启后也可以挂载了 如果不想重启 ...
- C# Httpclient编程
今天研究了一天C#如何添加cookie到httpcient里面,从而发请求时,能把cookie作为头部发出,最后发现根本加不进去. Httpclient的cookie是来自上一个请求的响应,httpc ...