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

代码如下：

 <!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. JavaScript中的数值转换

    在JavaScript中,有3个函数可以把非数值转换为数值 1.Number()函数 Number()可以用于任意数据类型. 转换规则如下. 如果是Boolean值,true和false将分别被转换为 ...

  2. Java8 新特性之Stream----java.util.stream

    这个包主要提供元素的streams函数操作,比如对collections的map,reduce. 例如: int sum = widgets.stream() .filter(b -> b.ge ...

  3. PHP上传大文件配置

    使用PHP上传比较大的文件时,发现程序没反应,那是因为PHP的默认设置限制了上传文件的大小,所以要修改配置文件php.ini中的一些选项:(以下只是我个人的配置,大家可根据自己的实际需要配置) fil ...

  4. 在for、foreach循环体中添加数组元素

    在开发工作中遇到这样一种情形,需要在循环体中动态向遍历中的数组添加元素并在当前循环遍历中使用数组的全部元素. 首先使用foreach循环来遍历数组,将代码简化抽象如下: $arr = array(1, ...

  5. PHP的Session机制

    客户端浏览器和服务器之间通信使用的http协议是一种无状态的协议,在它看来,客户端发起的每个请求都是独立.没有关联的.然而,在实际的Web应用开发中,服务器却经常需要根据用户以往的一些状态或数据对请求 ...

  6. LeetCode 339. Nested List Weight Sum （嵌套列表重和）$

    Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...

  7. HDU4027 Can you answer these queries?(线段树 单点修改)

    A lot of battleships of evil are arranged in a line before the battle. Our commander decides to use ...

  8. Java开发必装的IntelliJ IDEA插件

    IDEA 插件简介 常见的IDEA插件主要有如下几类: 常用工具支持 Java日常开发需要接触到很多常用的工具,为了便于使用,很多工具也有IDEA插件供开发使用,其中大部分已经在IDEA中默认集成了. ...

  9. android+eclipse+mysql+servlet(Android与mysql建立链接)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原创地址  .作者信息和本声明.http://www.cnblogs.com/zhu520/p/7724524.html 经过两天的时间我终于把A ...

  10. java Callable创建线程

    package com.java.concurrent; import java.util.concurrent.Callable; import java.util.concurrent.Execu ...