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

代码如下：

 <!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. 怎用不用工具创建一个javaWeb项目

    整体步骤是: 1: 新建一个文件夹:  以项目名称命名 2:在新建的文件夹下再新建一个文件夹 WEB-INF  (注意:大小写) 和 一个文件  index.jsp : index.jsp里面的代码: ...

  2. 单源最短路径问题-Dijkstra算法

    同样是层序遍历,在每次迭代中挑出最小的设置为已知 ===================================== 2017年9月18日10:00:03 dijkstra并不是完全的层序遍历 ...

  3. C 其他一些

    1.联合,语法 union{成员1;成员2;} 联合间的成员共享同一个空间,也就是说,成员1赋值如果没有被清除,会体现在成员2上 2.位字段,结合结构体瓜分完整的类型存储空间,如 struct{ ; ...

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

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

  5. LeetCode 560. Subarray Sum Equals K （子数组之和等于K）

    Given an array of integers and an integer k, you need to find the total number of continuous subarra ...

  6. 有两组随机生成的（0～99999）Int32数据A和B，将A按顺序判断在B中是否存在并记录在Boolean型的C中

    http://www.cnblogs.com/asxinyu/p/4504487.html

  7. Autofac学习之三种生命周期：InstancePerLifetimeScope、SingleInstance、InstancePerDependency

    InstancePerLifetimeScope:同一个Lifetime生成的对象是同一个实例 SingleInstance:单例模式,每次调用,都会使用同一个实例化的对象:每次都用同一个对象: In ...

  8. code force 401B. Game of Credit Cards

    B. Game of Credit Cards time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  9. Is It A Tree?

    Is It A Tree? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  10. 软硬链接、文件删除原理、linux中的三种时间、chkconfig优化

    第1章 软硬链接 1.1 硬链接 1.1.1 含义 多个文件拥有相同的inode号码 硬链接即文件的多个入口 1.1.2 作用 防止你误删除文件 1.1.3 如何创建硬链接 ln 命令,前面是源文件  ...