模拟多级复选框效果的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 ...
随机推荐
- c语言訪问excel
直接通过格式化读取文件就可实现,见附件
- WebService SOAP、Restful和HTTP(post/get)请求区别
web service(SOAP) Webservice的一个最基本的目的就是提供在各个不同平台的不同应用系统的协同工作能力. Web service 就是一个应用程序,它向外界暴露出一个能够通过We ...
- Python网络爬虫 - 下载图片
下载博客园的logo from urllib.request import urlretrieve from urllib.request import urlopen from bs4 import ...
- Fiddler SessionFlags
Each Session object in Fiddler contains a collection of string flags, in the Session.oFlags[] collec ...
- 1z0-052 q209_1
1: You perform differential incremental level 1 backups of your database on each working day and lev ...
- Python之filter筛选数据工具
# -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之filter筛选数据工具 #http://python.jobbole.com/82597/ ...
- js getAttribute getAttributeNode
getAttribute():返回属性值,是一个文本字符串 getAttributeNode("属性名"):返回属性节点,是一个对象 <p id="bj" ...
- cxf之Caused by: java.lang.RuntimeException: Soap 1.1 endpoint already registered on address /rest
发布rest服务 但是spring-cxf-rest.xml中配置的却是 <jaxws:server address="/weather".................. ...
- HDUOJ-----3591The trouble of Xiaoqian
The trouble of Xiaoqian Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/ ...
- HDUOJ--Holding Bin-Laden Captive!
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...