jquery模拟多级复选框效果的简单实例

2024-10-20 17:50:03

今天又次体会到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来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这人很好做,代码如下: 复制代码代码如下: evtEle.parent().next(".checks").find("input:checkbox").a
jquery模拟多级复选框效果的简单实例

今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c
jQuery.Sumoselect插件实现下拉复选框效果

简单介绍 jquery.sumoselect是一款跨设备.跨浏览器的jQuery下拉列表框插件.该jQuery下拉列表框插件可以单选,也可以多选.它的样式可以通过CSS文件来自定义.它的最大特点是可以跨设备使用,所有设备上功能都是一致的. 该jQuery下拉列表框插件的特点有: 可以进行单选,也可以进行多选. 可以通过CSS文件来自定义样式. 支持绝大多数的设备. 根据设备智能渲染. 在Android.IOS.Windows和其它设备上会自动渲染出该设备原生样式的下拉列表框. 可以自定义提交数据
jQuery+SpringMVC中的复选框选择与传值实例

一.checkbox选择在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked"); $("#cb1").attr("checked",true); 对应的jQuery函数,主要完成三个功能: 1.第一个复选框选中或取消选中,则下面的复选框为全选或取消全选: 2.当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: <body> <div> <input type="chec
js与jQuery实现checkbox复选框全选/全不选的方法

本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大
jQuery对checkbox 复选框的全选全不选反选的操作

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp
jQuery切换所有复选框选中状态的方法

本文实例讲述了jQuery切换所有复选框选中状态的方法.分享给大家供大家参考.具体如下: 这段代码非常简单实用,通过链接切换所有checkbox是否选中 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 希望本文所述对大家的jq
jQuery实现遍历复选框的方法示例

本文实例讲述了jQuery实现遍历复选框的方法.分享给大家供大家参考,具体如下: 1.问题背景: 这里有10个复选框,根据选择的复选框获取其值,并将其值用"--"连接,插入到div中 2.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>遍历复选框</title> <script type="tex
基于MFC实现自定义复选框效果

目录介绍功能实现介绍什么叫做复选框? 复选框是一种可同时选中多项的基础控件,主要是有两种明显的状态:选中与非选中. 在我们实际开发过程中,单纯的系统边框已经无法满足对界面显示需求了,这时需要采用自定义图片进行展示,那么展示效果是如何呢? 对于我们MFC框架来说,想要实现一个自定义的控件很难,一般情况下采用自绘的方式实现.对于Check控件来说,也是如此. 功能实现复选框父类:CButton 当我们从资源视图中拖出来一个控件并绑定成员变量后,当前复选框的父类便是CButton. 这里,假

jquery模拟多级复选框效果的简单实例

相关推荐

随机推荐