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

代码如下：

 <!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. canvas+gif.js打造自己的数字雨头像

    前言 昨天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像

  2. Tomcat 笔记-配置域名

    编辑/etc/hosts文件,添加域名: 127.0.0.1 localhost 127.0.1.1 ubuntu # The following lines are desirable for IP ...

  3. LeetCode 170. Two Sum III - Data structure design （两数之和之三 - 数据结构设计）$

    Design and implement a TwoSum class. It should support the following operations: add and find. add - ...

  4. LeetCode 259. 3Sum Smaller （三数之和较小值） $

    Given an array of n integers nums and a target, find the number of index triplets i, j, k with 0 < ...

  5. JAVA 的 Date、Calendar的常用用法

    一.Date与String的互转用法,这里需要用到SimpleDateFormat Date date = new Date();        //设置格式        SimpleDateFor ...

  6. 微信小程序用setData修改数组或对象中的一个属性值

    在page中有如下数组 data: { info:[ { name:"yuki", tou:"../img/head.jpg", zGong:130, gMon ...

  7. linux学习（五）系统目录结构，ls命令，文件类型，alias

    一.系统目录结构 在我们的根目录下,有这样一些文件夹 /bin /sbin /usr/bin /usr/sbin /sbin一般都是root用户用的 /boot 系统启动相关的,grup就放在这里,这 ...

  8. Leetcode题解（六）

    21.Merge Two Sorted Lists 题目 直接上代码: class Solution { public: ListNode *mergeTwoLists(ListNode *l1, L ...

  9. ASP.NET Core的身份认证框架IdentityServer4（6）- 开始

    安装和概述 启动一个新的IdentityServer项目有两种基本方法: 从头开始 从Visual Studio中的ASP.NET身份模板开始 如果从头开始,我们提供了一些文档.项目帮助和内存存储支持 ...

  10. empty()和remove()的区别

    这两个都是删除元素,但是两者还是有区别的. remove()这个方法呢是删除被选元素的所有文本和子元素,当然包括被选元素自己. 而empty()呢,被选元素自己是不会被删除的. 比如: <div ...