全选、取消、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 ...
随机推荐
- 83 parrted-分区和分区大小的调整
parted命令是由GNU组织开发的一款功能强大的磁盘分区和分区大小调整工具,与fdisk不同,它支持调整分区的大小.作为一种设计用于Linux的工具,它没有构建成处理与fdisk关联的多种分区类型, ...
- 使用Extjs组件实现Top-Left-Main布局并且增加事件响应
每次在毕业答辩会上,看到同专业的同学只要是XXX管理系统,就是下图所示的界面,看来这中布局还是很受欢迎的(偷笑).接下来进入我们正题,在web项目无论是前端还是后台管理比较常见的布局就是Top-Lef ...
- [bigdata] Spark RDD整理
1. RDD是什么RDD:Spark的核心概念是RDD (resilient distributed dataset),指的是一个只读的,可分区的弹性分布式数据集,这个数据集的全部或部分可以缓存在内存 ...
- 【CityHunter】游戏流程设计及技术要点
目前CityHunter的核心玩法和主要的技术实现点已经全部到位,但是本人并未真正设计过整个游戏系统,所以只能循规蹈矩的先从最基本的流程图开始规划. 以上的流程是打开游戏直到控制台,接下来,是从控制台 ...
- 8 HTML&JS等前端知识系列之Ajax的例子
what is ajax ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...
- Apache与Tomcat服务器
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.在Apache基金会里面Apache S ...
- Java开发面试总结
Java开发面试总结.. ----------------------- java 基础知识点这一块: 1.面向对象的三大特征.(继承,封装,多态) 1.1 在什么样的场合下面会使用到继承 1.2 什 ...
- group by 查询分组后 组的条数
比如select gid from table group by gid 查询时使用下面的方法查询条数 select count(distinct gid) from table 使用select c ...
- Node.js入门笔记(1):基本概念
Node.js和JavaScript: 核心都是ECMAScrit,比如数据类型,语法结构,内置对象等等. 但是在js中顶层是window 在node中的不存在这个window(console.log ...
- Git入门
转: http://www.cnblogs.com/luxiaojun/p/5944145.html