jquery模拟多级复选框效果的简单实例
更新时间：2016年06月08日 10:57:53 投稿：jingxian
下面小编就为大家带来一篇jquery模拟多级复选框效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
今天又次体会到jquery的强大了，做了个多级复选框的效果，代码总共就20+行就over了。
我又想用js来做一个看看，才写了几个方法就写不动了，兼容性要考虑很多，而且代码量直线上升。
主要分享下jquery的这个效果的实现。代码块分两块：
一是全选的效果，就是点击全选的复选框时它的子孙都相应被选中或者未选中。这个很好做，代码如下：
evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);//evtEle是点击的复选框
二是当前复选框的父框根据当前框的兄弟是否全选中来决定父框是否选中，再继续往上看父框的父框等。
当全选中时这里的实现使用parents来得到所有的父框，对每一个的操作结合each来完成。
当非全选中时父框依次失去被选中。代码如下：
if (evtEle.is("input:checked")) {
evtEle.parents(".checks").each(function () {
!$(this).children("p").children("input:checkbox").filter(function () {
return !this.checked;
})[0] && $(this).prev().children("input:checkbox").attr("checked", "checked");
});
} else {
evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false);
}
以上这篇jquery模拟多级复选框效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
代码很简单，直接上代码。别忘记引用JQuery包。2011-08-08
jQuery获取文本节点之 text()/val()/html() 方法区别
在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?2011-03-03
翻译整理的jQuery使用查询手册...2007-03-03
这篇文章主要介绍了jQuery实现的简单日历组件定义与用法,结合实例形式详细分析了基于jQuery扩展实现日历功能的相关操作技巧,需要的朋友可以参考下2018-12-12
在开发系统时，往往都有某些表单数据为必填项，若用jQuery通过ID去验证，不仅会影响效率，还会有所遗漏，不易于后期维护。 本章将介绍如何利用jQuery，通过为表单配置class进行统一验证。2015-11-11
本文介绍了14个很酷的jQuery导航菜单插件，它们够漂亮、简单，并且完全兼容各种类型的web浏览器。2011-04-04
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
这篇文章主要介绍了jQuery获取访问者IP地址的方法,实例分析了jQuery基于新浪API与QQ查询接口获取来访者IP的相关参数传递与数据处理技巧,需要的朋友可以参考下2016-05-05
本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了jQuery简单实现两级下拉菜单效果代码,基于jQuery遍历简单实现菜单效果,非常具有实用价值,需要的朋友可以参考下2015-09-09
jQuery Ajax 实现分页 kkpager插件实例代码
本文通过实例代码给大家讲解了jQuery Ajax 实现分页 kkpager插件功能，需要的的朋友参考下吧2017-08-08
最新评论