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. GoogleCpp风格指南 8)格式 _part1

    8 格式 Formatting 代码风格和格式确实比較任意, 但一个项目中全部人遵循同一风格是非常easy的; 个体未必允许下述每一处格式规则, 但整个项目服从统一的编程风格是非常重要的, 仅仅有这样 ...

  2. DataGrid前台数据绑定技巧

    (1)DataGrid控件不换行,数据显示不完全后面加"..." <%# DataBinder.Eval(Container.DataItem,? DataBinder.Ev ...

  3. iOS键盘高度自适应(中英文输入)

    一:添加通知监测键盘高度变化 [self keyBoardAutoSize]; 二:动态改变高度 #pragma mark keyboard height auto /* NSNotification ...

  4. 简单分页查询(web基础学习笔记十三)

    一.建立资源文件和工具类 1.1 .database.properties jdbc.driver_class=oracle.jdbc.driver.OracleDriver jdbc.connect ...

  5. TCP相关面试题总结

    1.TCP三次握手过程 wireshark抓包为:(wireshark会将seq序号和ACK自己主动显示为相对值) 1)主机A发送标志syn=1,随机产生seq =1234567的数据包到server ...

  6. OpenCV图像处理篇之阈值操作函数

    阈值操作类型 这5种阈值操作类型保留opencv tutorials中的英文名称.依次为: Threshold Binary:即二值化,将大于阈值的灰度值设为最大灰度值.小于阈值的值设为0. Thre ...

  7. Ubuntu apt-get方式安装Subversion

    按照官方文档 http://subversion.apache.org/packages.html 使用apt-get安装方式: 1.安装Subversion: sudo apt-get instal ...

  8. 堆叠相冊效果,兼容pc和移动端

    在手机端,堆叠效果的相冊是比較常见的一种图片展示方式,每一个人的思路可能会有一些不同,实现的方法不同. 本篇博客主要是分享下我的实现方法.欢迎大家提出建议,指出我的不足,先3Q啦~ 先看一下终于的效果 ...

  9. 关闭ubuntu终端的BELL声音

    在shell提示符下面操作时有时会用到Tab来自动补全,这个时候系统就会发出BELL的声音,听了让人挺烦的. 有个方法能解决:编辑 /etc/inputrc,找到#set bell-style non ...

  10. eclipse properties文件插件

      eclipse properties插件 CreateTime--2018年4月22日22:51:34 Author:Marydon 下载地址:properties文件插件.rar 1.将plug ...