在网页制作中，三级关联选择经常遇到，于是归纳了一个进行参考

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

     <script>

         $(function(){

           var Ocheckall = $('.type1');    // 获取全选元素

           var Acheck_class1 = $('.type2');// 获取第一类选择元素

           var Acheck_class3 = $('.type3');// 获取第二类选择元素

           var Aquanbu = $('input');       // 所有选择元素集合

           Ocheckall.on('click',function(){

               Aquanbu.prop('checked',$(this).prop('checked'));   // 获取当前全选元素的checked 属性值，将所有元素的checked 属性设置为这个值

           });

           Acheck_class1.on('click',function(){

               $(this).parents('.box1').find('.type3').prop('checked',$(this).prop('checked')); // 获取当前元素的checked 属性值，将这个元素形式上的子类checked 属性设置为获取到的属性值

               Acheck_class1.parent().find(':checked').length == Acheck_class1.length ? Ocheckall.prop('checked',true) : Ocheckall.prop('checked',false);  // 判断第一类元素的已经选择的数量与第一类元素本身的个数是否相同，如果相同，则将全选元素设置为选中状态，否则设置为未选中状态

           });

           Acheck_class3.on('click',function(){

              var curentlen = $(this).parents('.box2').find(':checked').length;  // 获取当前第二类选择元素的选中的个数

              var alen = $(this).parents('.box2').find('.type3').length;  // 获取当前第二类选择元素的本身的个数

              var Oyilei = $(this).parents('.box1').find('.type2');       // 获取当前选择元素的上级（形式上的）第一类选择元素

              curentlen == alen ? Oyilei.prop('checked',true) : Oyilei.prop('checked',false);  // 判断当前第二类选择元素的已经选择的个数与本身选择元素的个数是否相同，如果相同，则将 当前选择元素的上级（形式上的）第一类选择元素 的checked 属性设置为true,否则设置为false

              Acheck_class1.parent().find(':checked').length == Acheck_class1.length ? Ocheckall.prop('checked',true) : Ocheckall.prop('checked',false);  // 判断第一类元素的已经选择的数量与第一类元素本身的个数是否相同，如果相同，则将全选元素设置为选中状态，否则设置为未选中状态

           });

         });

     </script>

 </head>

 <body>

     <ul class="box">

         <li><input type="checkbox" class="type1">全部 </li>

         <ul class="box1">

             <li> <input type="checkbox" class="type2">第一类 </li>

             <ul class="box2">

                 <li> <input type="checkbox"  class="type3">第1个 </li>

                 <li> <input type="checkbox"  class="type3">第2个 </li>

                 <li> <input type="checkbox"  class="type3">第3个 </li>

                 <li> <input type="checkbox"  class="type3">第4个 </li>

             </ul>

         </ul>

         <ul class="box1">

             <li> <input type="checkbox" class="type2">第二类 </li>

             <ul class="box2">

                 <li> <input type="checkbox"  class="type3">第1个 </li>

                 <li> <input type="checkbox"  class="type3">第2个 </li>

             </ul>

         </ul>

         <ul class="box1">

             <li> <input type="checkbox" class="type2">第三类 </li>

             <ul class="box2">

                 <li> <input type="checkbox"  class="type3">第1个 </li>

                 <li> <input type="checkbox"  class="type3">第2个 </li>

                 <li> <input type="checkbox"  class="type3">第3个 </li>

             </ul>

         </ul>

         <ul class="box1">

             <li> <input type="checkbox" class="type2">第四类 </li>

             <ul class="box2">

                 <li> <input type="checkbox"  class="type3">第1个 </li>

                 <li> <input type="checkbox"  class="type3">第2个 </li>

                 <li> <input type="checkbox"  class="type3">第3个 </li>

                 <li> <input type="checkbox"  class="type3">第4个 </li>

             </ul>

         </ul>

     </ul>

 </body>

 </html>

运行结果：

备注：在代码中，获取元素的checked 属性值，用的函数是 prop() ，而不是attr()；当然这两个函数都可以进行checked 设定，但是还是有一些差异的，可能会导致错误，如下：

// prop与attr在获取未选中状态时，返回值是不同的
// 如果是选中的 attr ----> checked, 如果没选中 attr -----> undefined
// 如果是选中的 prop ----> true, 如果没选中 prop -----> false

jquery 三级关联选择效果的更多相关文章

  1. asp.net mvc中使用jquery H5省市县三级地区选择控件

    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...

  2. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  3. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  4. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  5. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  6. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  7. jquery Jquery 遍历 获取设置 效果

    speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...

  8. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  9. jQuery取得select选择的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :$("#ddlregtype").find("option:selec ...

随机推荐

  1. Zookeeper 笔记-watch

    ZooKeeper对Watch提供了什么保障 对于watch,ZooKeeper提供了这些保障: Watch与其他事件.其他watch以及异步回复都是有序的. ZooKeeper客户端库保证所有事件都 ...

  2. 关于VRTK的使用（一）—— VR开发环境搭建

    首先在Hierarchy窗口中添加GameEmpty,并重命名为VRTK.然后给VRTK添加一个子容器命名为SteamVR.从Asset Store导入SteamVR Plugin: 然后分别选中预制 ...

  3. JAVA基础-XML的解析

    一.XML的概述 XML的全名为可扩展标记语言(Extensible Markup Language),XML的作用为:1.传输,2.存取数据,3.软件的配置文件.传输现在都用更轻量的Json,而存储 ...

  4. Arduino.最小系统面包板搭建

    最早试过用万用板做过最小系统,主要用来烧录芯片 后来为了方便,用面包板也搭了一个最小系统, 但不采用杜邦线,因为飞来飞去的线太乱了 因此就有了这个简洁的版本,先上个成品图 用个烧录器就可以很方便的烧写 ...

  5. java：凯撒密码及String的应用

    一,凯撒密码 古罗马皇帝凯撒在打仗时曾使用过以下方法加密军事情报 现在用java实现 程序设计思想: 1,字符串首先要转化为字符数组,才能依次加密 2,当原来的字符为X,Y,Z时,加密后要转化为A,B ...

  6. MongoDB正则表达式

    MongoDB 使用 $regex 操作符来设置匹配字符串的正则表达式. 1. 搜索包含某关键字的内容: db.posts.find({post_text:{$regex:"w3cschoo ...

  7. MongoDB基本命令行操作

    1. 连接MongoDB: Mongodb://username:password@hostname/dbname 2. 创建数据库: use dbname:如果数据库不存在则创建数据库,否则切换到指 ...

  8. js判断元素滑动方向（上下左右）移动端

    每天学习一点点. 1 var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) ...

  9. ssh免密码记录

    主机器A通过ssh连多台从机器(b1,b2,b3). 1.使用root用户操作,避免权限问题. 2.在主从机器中安装ssh,命令: ssh-keygen –t rsa 然后都回车,生成的文件在/roo ...

  10. JDBC（MySQL）一周学习总结（二）

    上一篇文章我们总结了获取数据库连接以及操作数据表的一些知识点,本篇将继续上次的文章给大家分享! 1. 上一篇文章我们可以对数据表进行增删改查的操作了,对与一些小项目的部分功能我们也足以胜任.但现在有一 ...