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

代码如下：

 <!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. js页面事件方法

    1. 监听页面加载事件: window.onload = function (){ alert('页面加载成功'); } 2.监听页面大小改变事件: window.onresize = functio ...

  2. Golang源码探索(一) 编译和调试源码

    GO可以说是近几年最热门的新型语言之一了, 一般人看到分布式和大数据就会想到GO, 这个系列的文章会通过研究golang的源代码来分析内部的实现原理, 和CoreCLR不同的是, golang的源代码 ...

  3. Spring框架学习之高级依赖关系配置（二）

    紧接着上篇内容,本篇文章将主要介绍XML Schema的简化配置和使用SpEL表达式语言来优化我们的配置文件. 一.基于XML Schema的简化配置方式 从Spring2.0以来,Spring支持使 ...

  4. Javascript中的Trait与代码重用

    Javascript中的Trait与代码重用 来源 http://www.ituring.com.cn/article/64103 我们知道,OOP中最普遍的代码重用方式是通过继承,但是,继承有一些缺 ...

  5. StringDup（理论AC）

    Problem Statement for StringDup Problem Statement      Create a class called StringDup. Given a stri ...

  6. Power Strings（KMP）

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 45008   Accepted: 18794 D ...

  7. SQL Server远程连接（2）

  8. Phonegap开发相关问题

    环境搭建:参考http://www.phonegapcn.com/start/zh/1.3/#android 调试: 1.在线远程调试 http://debug.phonegap.com/ 通过USB ...

  9. Samba服务安装及配置

    服务器环境:CentOS6.9 Linux 2.6.32-696.10.1.el6.x86_64 安装Samba服务 过程中会安装3个服务smb(文件.打印共享服务,使用139.445端口).nmb( ...

  10. Python丨Python 性能分析大全

    虽然运行速度慢是 Python 与生俱来的特点,大多数时候我们用 Python 就意味着放弃对性能的追求.但是,就算是用纯 Python 完成同一个任务,老手写出来的代码可能会比菜鸟写的代码块几倍,甚 ...