需求:点击父级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的选中切换的更多相关文章

  1. jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

    2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...

  2. js实现checkbox的全选/取消

    所有的操作都将使用jquery进行. 主要是为了实现指定内容的批量/单独删除操作. 先看一下页面的设计. 实现操作的主要地方是: 首先实现单击“标题”旁的checkbox实现所有条目的选择. 要点:j ...

  3. (转载)jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...

  4. 2016/3/31 ①全选时 下面选项全选中 ② 下面不选中时 全选取消 ③在“” 中 转义字符的使用\ onclick=\"Checkpa(this,'flall')\"; ④区别于分别实现 重点在于两种情况合并实现

    testxuanbuxuan.php <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  6. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  7. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  8. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  9. (2)Jquery1.8.3快速入门_checkbox全选取消部分选中

    1. jquery示例功能: checkbox多选框 全选 .全不选. 选择部分. 源码 : <!DOCTYPE html> <html> <head> <m ...

随机推荐

  1. RGW 负载均衡和高可用的几个方案对比

    注:在RGW网关主机网卡已经是10Gb的情况下,如下三个方案没有引入LVS:如果RGW是Gb网卡,可以考虑引入LVS做流量负载均衡. RGW部署采用 fastcgi+nginx 扩展性和可配置性更强. ...

  2. c++/java/python priority_que实现最大堆和最小堆

    #include<iostream>#include<vector>#include<math.h>#include<string>#include&l ...

  3. Android基础总结(二)

    常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...

  4. Servlet和JSP学习指导与实践(三):JSP助阵

    前言: JSP(Java Server Page)虽然作为一门服务端的语言,但它并没有创新新的语言标准.有些人一接触jsp之后发现易学易懂.实际上,jsp的内部原理仍然是基于Servlet,它是Ser ...

  5. 30秒懂SQL中的join(2幅图+30秒)

    废话不多说,直接上图秒懂. t1表的结构与数据如下: t2表的结构与数据如下: inner join select * from t1 inner join t2 on t1.id = t2.id; ...

  6. git 代码更新

    第一:先说首次使用 意思就是这个文件夹中的代码你还没有向GITHUB提交过代码 cd /home/test(假如 test就是你的用户名)/githubtest(这是个文件夹,你可以提前先建立好,这个 ...

  7. python取mysql数据写入excel

    环境:MySQLdb openpyxl模块 python去zabbix的mysql数据库中取交换机不同时间段的进出口流量,然后写入excel中,每天cron执行,每周四邮件发送.(代码中第一行必须加上 ...

  8. IBatis 批量插入数据之SqlBulkCopy

    public void AddLetters(IList<int> customerIds, string title, string content, LetterEnum.Letter ...

  9. linux 乱码

    xwindow终端乱码 在/etc/sysconfig/i18n文件的最后一行添加如下内容: export LC_ALL="zh_CN.GB18030" vi /etc/sysco ...

  10. 图解JVM字节码执行引擎之栈帧结构

    一.执行引擎      “虚拟机”的概念是相对于“物理机”而言的,这两种“机器”都有执行代码的能力.物理机的执行引擎是直接建立在硬件处理器.物理寄存器.指令集和操作系统层面的:而“虚拟机”的执行引擎是 ...