jq实现checkbox全选中以及获得选中的checkbox的值

html代码

<div class="cd_zj_l"><div class="cd_title">目录导航</div>
<div class="cv_fcv node"><div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>大客户事业部</span></div><ul class="node"><li><div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>大客户营销中心</span></div><ul class="node"><li><div class="tree"><input class="checkboxhand" type="checkbox"/><span>李阳</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>宋毅</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>刘能</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>赵四</span></div></li><div style="clear:both"></div></ul></li><div style="clear:both"></div></ul><div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>大客户事业部</span></div><ul class="node"><li><div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>大客户营销中心</span></div><ul class="node"><li><div class="tree"><input class="checkboxhand" type="checkbox"/><span>李阳</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>宋毅</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>刘能</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>赵四</span></div></li><div style="clear:both"></div></ul><div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>交付中心</span></div><ul class="node"><li><div class="tree"><input class="checkboxhand" type="checkbox"/><span>艾希</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>提姆</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>易</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>盖伦</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>赵信</span></div></li><div style="clear:both"></div></ul></li><div style="clear:both"></div></ul><div class="tree"><a class="switch_hand" href="javascript:;"></a><input class="checkboxhand" type="checkbox"/><span>无部门所属</span></div><ul class="node"><li><div class="tree"><input class="checkboxhand" type="checkbox"/><span>艾希</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>提姆</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>易</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>盖伦</span></div><div class="tree"><input class="checkboxhand" type="checkbox"/><span>赵信</span></div></li><div style="clear:both"></div></ul>
</div>
</div>

jq代码

百度很多checkbox选中事件不能兼容或者就是存在问题，然后就自己写了一段，只是为了记住，希望能为大家提供帮助

// JavaScript Document
$(".tree").each(function(index, element) {if($(this).next(".node").length>0){$(this).find(".switch_hand").addClass("ce_ceng_close");}});
$(".switch_hand").click(function(e){var ul = $(this).parent().next(".node");if(ul.css("display")=="none"){ul.slideDown();$(this).addClass("ce_ceng_open");ul.find(".ce_ceng_close").removeClass("ce_ceng_open");}else{ul.slideUp();$(this).removeClass("ce_ceng_open");ul.find(".node").slideUp();ul.find(".ce_ceng_close").removeClass("ce_ceng_open");}
});
$(".checkboxhand").change(function(e){if($(this).is(":checked")){$(this).parent().next(".node").find(".checkboxhand").prop("checked",true);}else{$(this).parent().next(".node").find(".checkboxhand").prop("checked",false);}checkisAll($(this));
});
function checkisAll(e){if($(e).parent().parent().find(".checkboxhand").length==$(e).parent().parent().find(".checkboxhand:checked").length){$(e).parent().parent().parent().prev(".tree").find(".checkboxhand").prop("checked",true);}else{if($(e).parent().parent().parent().prev(".tree").find(".checkboxhand").is(":checked")){$(e).parent().parent().parent().prev(".tree").find(".checkboxhand").prop("checked",false);}}if($(e).parent().parent().parent().prev(".tree").length>0){checkisAll($(e).parent().parent().parent().prev(".tree").find(".checkboxhand"));}
}

实现的效果图

jq实现checkbox全选中以及获得选中的checkbox的值相关推荐

JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
2019独角兽企业重金招聘Python工程师标准>>> JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的. 判断checkbox是否被选中网上有选多种写法,这里 ...
通过js控制layui选择框checkbox的选中、取消选中，以及使用layui实现全选、取消全选的一种方式
js控制选中.取消选中 ,layui实现全选.取消全选 layui版本2.5.x html部分: <form class="layui-form" id="form ...
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
例:将多个选中的checkbox的值组装成一个字符串 <script type=text/javascript> function addMem(){ //var followers = ...
元素的选中问题元素选中的问题切换复选框选中全选和全不选
元素的选中问题 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
checkbox获取勾选状态_jQuery判断checkbox选中状态
前言神奇的JQuery怎么设置checkbox状态时好时坏?明明同一行代码,断点跟踪确实执行了,但是有时候好使,有时候却没有生效.毕竟对JS不是很熟悉,只是通过JS来处理前端HTML的标签的状态设置 ...
jquery如何获取checkbox，并判断是否选中
2019独角兽企业重金招聘Python工程师标准>>> jquery如何获取checkbox,并判断是否选中 <div id="divId" class=& ...
js获取checkbox复选框获取选中的选项
分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document. ...
vue复选框默认被选中_vue .js绑定checkbox并获取、改变选中状态的实例
vue .js绑定checkbox并获取.改变选中状态的实例 2019-01-07 编程之家收集整理的这篇文章主要介绍了vue .js绑定checkbox并获取.改变选中状态的实例,编程之家小编觉得挺 ...
复选框checkbox如何判定为被选中
近期,我在开发网站的考试系统时,遇到了一个关于复选框checkbox如何判定为被选中的问题.网上的说法很多,但是没有说到重点上的,而这篇文章解释的很详细,于是,我把它记录下来.原始博客地址:http: ...

jq实现checkbox全选中以及获得选中的checkbox的值

jq实现checkbox全选中以及获得选中的checkbox的值相关推荐

最新文章

热门文章