模拟多级复选框效果的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
今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jq ...
- 模拟select下拉框、复选框效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js实现多级复选框的交互
功能介绍 整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断: 1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样. 2要判断它是否有父级,有父级 ...
- jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值
做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...
- jquery 操作单选框,复选框,下拉列表实现代码
1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type ...
- checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果
前台代码 01.<html xmlns="http://www.w3.org/1999/xhtml"> 02.<head runat="server&q ...
- 你见过吗?9款超炫的复选框(Checkbox)效果
复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能.下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS ...
- jQuery选取所有复选框被选中的值并用Ajax异步提交数据
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
- 有关下拉列表、复选框、单选按钮、iframe等jquery处理方法
1.jquery验证复选框互斥选项,代码如下: //验证复选框中的互斥选项 function checkData(name, val1, val2){ //获取所有checkbox值 var chec ...
随机推荐
- shell中如何取括号中的字符
1. 使用grep(结果带括号,不知道有没有办法仅把括号中的内容匹配出来) $a='abc[edg]adfirpqu' $echo $a|grep -o '\[.*\]' #中括号的处理需要转义 [e ...
- B/S与C/S的差别
前一段时间已经结束了C/S的学习,開始了B/S的旅程,那么为什么我们要学习这两个,这两个有什么差别呢?这些差别你知道多少呢? B/S结构.即Browser/Server(浏览器/server)结构.是 ...
- Java 基础【13】 I/O流概念分析整理
转载地址:http://blog.csdn.net/yuebinghaoyuan/article/details/7388059 java.io 中的流,可以从不同的角度进行分类. 按照数据流的方向不 ...
- sqlserver varchar转datate 加计算
SELECT * from mconsumeinfo mo where CONVERT(Datetime, mo.financedate, 120)> dateadd(day,-180,getd ...
- Access denied with payslip工资条非同部门员工不能创建bug
Access Denied The requested operation cannot be completed due to security restrictions. Please conta ...
- poj 2195 Going Home(最小费最大流)
poj 2195 Going Home Description On a grid map there are n little men and n houses. In each unit time ...
- ActiveMq C#客户端 消息队列的使用(存和取)
1.准备工具 VS2013Apache.NMS.ActiveMQ-1.7.2-bin.zipapache-activemq-5.14.0-bin.zip 2.开始项目 VS2013新建一个C#控制台应 ...
- 流动的推荐系统——兴趣Feed技术架构与实现
流动的推荐系统 我们经常谈论的推荐系统(Recommender System),从形式上看是比较“静态”的推荐,通常位于网页主要信息的周边,比如电商网站的“看了又看”.“买了又买”.这种推荐系统在大多 ...
- 转载【小程序】: 微信小程序开发---应用与页面的生命周期
App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Functi ...
- 【微信小程序】 引用公共js里的方法
一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们 ...