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. @SuppressLint("NewApi")和@TargetApi()的区别

    在Android代码中,我们有时会使用比我们在AndroidManifest中设置的android:minSdkVersion版本更高的方法,此时编译器会提示警告, 解决方法是在方法上加上@Suppr ...

  2. uni - 介绍

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台 优点:基于vue.mpvue.微信小程序 微信小程序AP ...

  3. 【剑指offer】二分查找二维数组

    1 2 3 4 5 6 7 8 9 3 3 1 2 3 4 5 6 7 8 9 10 3 3 12 2 3 4 5 6 7 8 9 10 例子输出: Yes No No 时间限制:1 秒 内存限制:3 ...

  4. Android的startActivityForResult不起作用

    之前startActivityForResult一直用的好好的,今天发现怎么也不起作用.检查后发现有两点影响了. 1.android:launchMode="singleTask" ...

  5. The Web Sessions List

    The Web Sessions list contains the list of HTTP Requests that are sent by your computer. You can res ...

  6. 使用web_url注意Resource的选项

    在使用web_url的时候,一定注意Resource的使用,一般最好使用Resource=0,如果使用Resource=1,那么一定要修改配置. Resource Attribute If Resou ...

  7. 引入css的几种方式

      使用CSS样式的几种方式 CreateTime--2017年10月11日16:45:26 Author:Marydon a.外部样式 a1.链接式(推荐使用) <link href=&quo ...

  8. webservice系统学习笔记7-异常处理

    接口类:IMyService.java @WebResult(name="testExceptionResult") public void testException() thr ...

  9. 获取泛型类对应的class类型

    自己写来备忘的,如有错误,请指正! public class Demo<T> { private Class<T> clazz; public Demo() { Paramet ...

  10. VNC-tigervnc-server远程调用图形化

    远程调用Linux图形化,很不错的.. 01.远程Linux须装图形化 yum groupinstall -y    'Desktop'   'X Window System'  #xclock试图形 ...