全选、取消、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 ...
随机推荐
- c#JS调用
using MSScriptControl; using System; using System.Collections.Generic; using System.Reflection; usin ...
- 图片加载框架Fresco与V4包冲突解决方法
- jquery源码中的(function(window, undefined){})(window)【转】
(function( window, undefined ) {})(window);这个,为什么要将window和undefined作为参数传给它? (function( $, undefined ...
- 使用powershell链接到Azure
一:针对传统的的Azure 的登陆界面: (ASM) 1. 正常来说是 现在本地创建证书文件,然后上传文件,以便本地计算机和Azure建立可靠的安全连接 Get-AzurePublishSetting ...
- js 时间操作和随机数操作
function Data() { var date = new Date(); var year = date.getFullYear(); ; var strDate = date.getDate ...
- ionic 白屏
昨天在发布新app的时候发现app在高版本的android的时候发现没有问题,在低版本的android 的时候发现存在白屏的情况,在run中alert,不能弹框,run不能运行, 参考这篇文章 ht ...
- Yii rules常用规则
public function rules() { return array( //必须填写 array('email, username, password, ...
- 11月6日下午PHP注册审核(审核状态控制登录、可以更改审核状态)
1.创建登录界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 面试题目——《CC150》排序与查找
面试题11.1:给定两个排序后的数组A和B,其中A的末端有足够的缓冲空间容纳B.编写一个方法,将B合并入A并排序. package cc150.sort_search; public class Me ...
- ThinkPHP3.2.3整合smarty模板(一)
一.php模板引擎有哪些? 1.1 PHPLIB:一套古老且主流的模板引擎,直接在html中使用PHP变量进行编程: 1.2 Template Blocks:一款轻巧且速度非常快的PHP模板引擎,支持 ...