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代码的更多相关文章

  1. 模拟多级复选框效果--jquery

    今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jq ...

  2. 模拟select下拉框、复选框效果

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. js实现多级复选框的交互

    功能介绍   整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断: 1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样. 2要判断它是否有父级,有父级 ...

  4. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  5. jquery 操作单选框,复选框,下拉列表实现代码

    1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type ...

  6. checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果

    前台代码 01.<html xmlns="http://www.w3.org/1999/xhtml"> 02.<head runat="server&q ...

  7. 你见过吗?9款超炫的复选框(Checkbox)效果

    复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...

  8. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  9. 有关下拉列表、复选框、单选按钮、iframe等jquery处理方法

    1.jquery验证复选框互斥选项,代码如下: //验证复选框中的互斥选项 function checkData(name, val1, val2){ //获取所有checkbox值 var chec ...

随机推荐

  1. 使用sigc++插槽系统

    http://www.cppblog.com/gaimor/archive/2010/02/22/108236.html?opt=admin 我所知的c++插槽系统由3个boost的,sigslot的 ...

  2. 【oracle】dblink创建

    目的:oracle中跨数据库查询 两台数据库服务器db_A(本地)和db_B(远程192.168.1.100),db_A下用户user_a 需要访问到db_B下user_b的数据 解决:查询得知使用d ...

  3. 【.NET中AOP的实现方案】静态代理

    Spring AOP 应该是比较出名的了,今天说的是C#里的AOP,C#的AOP实现的方式有很多种,现在就先介绍静态代理的实现方案: 模拟场景:我们在删除用户,或者更新用户的时候进行数据原始备份,这样 ...

  4. 实现 1像素border

    border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: ...

  5. hihoCoder 1014 Trie树 (Trie)

    #1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描写叙述 小Hi和小Ho是一对好朋友.出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮 ...

  6. Android 华为U8818真机调试 无法打印Logcat

    摘抄至:http://blog.csdn.net/studyalllife/article/details/8558258 在我们使用真机进行Android应用调试时,无法获得调试信息,错误提演示样例 ...

  7. poj 1156 Palindrome

    Palindrome Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 51631   Accepted: 17768 Desc ...

  8. listView滚动事件

    listView滚动事件 实现接口: android.widget.AbsListView.OnScrollListener Interface definition for a callback t ...

  9. O(n)复杂度求没有出现的数字(leetcode448)

    一个长度为N的数组,其中元素取值为1-N,求这个数组中没有出现的.1-N之间的数字. 要求无额外空间,O(n)时间复杂度. nums[i]=-1表示i数字已经出现过了 class Solution(o ...

  10. 2017年WorkApplication牛客网线上机试题

    WorkApplication是一家日企,主要办公地在东京.新加坡.上海等地. 第一题:n的全排列中有多少个排列逆序数为k 输入两个数字n,k,两个数字的范围都是[1,1000]. 输出:n的全排列中 ...