jQuery 页面中复选框全选、反选、下拉联动(级联)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
  9.     <link rel="stylesheet" href="./dist/css/zTreeStyle.css">
  10.     <title>Document</title>
  11. </head>
  12.  
  13. <body>
  14.     <div class="container">
  15.         <div class="row">
  16.             <div class="col-md-12">
  17.                 <p class="text-center" style="background:rgba(0, 0, 0, .075);">
  18.                     <span style="background:lightcyan;">&lt;
  19.                         <span style="color:darkblue;">三级联动菜单</span>&gt;</span>
  20.                 </p>
  21.             </div>
  22.             <div class="col-md-4">
  23.                 <label for="One">一级菜单</label>
  24.                 <select name="default1" id="input${1/(\w+)/\u\1/g}" class="form-control">
  25.                     <option value="default">-- Select One --</option>
  26.                 </select>
  27.             </div>
  28.             <div class="col-md-4">
  29.                 <label for="Two">二级菜单</label>
  30.                 <select name="default2" id="input${1/(\w+)/\u\1/g}" class="form-control">
  31.                     <option value="default">-- Select One --</option>
  32.                 </select>
  33.             </div>
  34.             <div class="col-md-4">
  35.                 <label for="Three">三级菜单</label>
  36.                 <select name="default3" id="input${1/(\w+)/\u\1/g}" class="form-control">
  37.                     <option value="default">-- Select One --</option>
  38.                 </select>
  39.             </div>
  40.         </div>
  41.         <div class="row">
  42.             <div class="col-md-2">
  43.                 <div class="row">
  44.                     <div class="col-md-4">
  45.                         <input type="checkbox" name="getAll" id="getAll" value="全选" />
  46.                         <br> 全选
  47.                         <input type="checkbox" name="fsAll" id="fsAll" value="反选" />
  48.                         <br> 反选
  49.                         <input class="btn btn-primary" type="button" name="addCks" id="addCks" value="添加">
  50.  
  51.                         <input name="rem" id="rem" type="button" class="btn btn-danger" value="清空" />
  52.  
  53.                     </div>
  54.                     <div class="col-md-6 chekboxContent">
  55.                         <input type="checkbox" name="ck" value="">
  56.                         <input type="checkbox" name="ck" value="">
  57.                         <input type="checkbox" name="ck" value="">
  58.                         <input type="checkbox" name="ck" value="">
  59.                         <input type="checkbox" name="ck" value="">
  60.                         <input type="checkbox" name="ck" value="">
  61.                         <input type="checkbox" name="ck" value="">
  62.                         <input type="checkbox" name="ck" value="">
  63.                         <input type="checkbox" name="ck" value="">
  64.                         <input type="checkbox" name="ck" value="">
  65.                         <input type="checkbox" name="ck" value="">
  66.                         <input type="checkbox" name="ck" value="">
  67.                         <input type="checkbox" name="ck" value="">
  68.                         <input type="checkbox" name="ck" value="">
  69.                         <input type="checkbox" name="ck" value="">
  70.                         <input type="checkbox" name="ck" value="">
  71.                         <input type="checkbox" name="ck" value="">
  72.                         <input type="checkbox" name="ck" value="">
  73.                         <input type="checkbox" name="ck" value="">
  74.                         <input type="checkbox" name="ck" value="">
  75.                         <input type="checkbox" name="ck" value="">
  76.                         <input type="checkbox" name="ck" value="">
  77.                         <input type="checkbox" name="ck" value="">
  78.                         <input type="checkbox" name="ck" value="">
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.             <div class="col-md-8">
  83.                 <p class="text-center" id="oldContent"></p>
  84.                 <p class="text-center" id="newContent"></p>
  85.             </div>
  86.         </div>
  87.     </div>
  88.  
  89.     <script src="./dist/js/jquery.min.js"></script>
  90.     <script src="./dist/js/bootstrap.min.js"></script>
  91.     <script>
  92.         $(function () {
  93.  
  94.             $('[name=defaultSel]').empty(); // 清空
  95.             $('[name=defaultSel]').prepend("<option value='default'>请选择</option>").val('default');
  96.             //----------------------------------------------------------------------------------------
  97.  
  98.             // 初始化清空数据
  99.             $('[name=default1]').empty();
  100.             $('[name=default1]').prepend("<option value='default'>请选择</option>").val('default');
  101.             Empty2();
  102.             Empty3();
  103.             // 初始化加载数据
  104.             // 第一个下拉菜单追加数据
  105.             for (i = ; i <= ; i++) {
  106.                 $('[name=default1]').append("<option value='" + i + "'>" + i + "</option>");
  107.             }
  108.  
  109.         })
  110.         // 第一个下拉菜单选择事件
  111.         $('[name=default1]').change(function () {
  112.             if ($(this).val() === "default") {
  113.                 Empty2();
  114.                 Empty3();
  115.             } else {
  116.                 Empty2();
  117.                 Empty3();
  118.                 for (i = ; i <= ; i++) {
  119.                     $('[name=default2]').append("<option value=" + $(this).val() + i + ">" + $(this).val() + i + "</option>");
  120.                     // 解除禁用
  121.                     $('[name=default2]').removeAttr('disabled');
  122.                 }
  123.             }
  124.         });
  125.         // 清空第二个下拉菜单
  126.         function Empty2() {
  127.             $('[name=default2]').empty();
  128.             $('[name=default2]').prepend("<option value='default'>请选择</option>").val('default');
  129.             // 禁用
  130.             $('[name=default2]').attr('disabled', 'disabled');
  131.         }
  132.  
  133.         // 第二个下拉菜单点击点击事件
  134.         $('[name=default2]').change(function () {
  135.             if ($(this).val() === 'default') {
  136.                 Empty3();
  137.             } else {
  138.                 Empty3();
  139.                 for (i = ; i <= ; i++) {
  140.                     $('[name=default3]').append("<option value=" + $(this).val() + ">" + $(this).val() + i + "</option>");
  141.                     // 解除禁用
  142.                     $('[name=default3]').removeAttr('disabled');
  143.                 }
  144.             }
  145.         });
  146.  
  147.         // 清空第三个下拉菜单
  148.         function Empty3() {
  149.             $('[name=default3]').empty();
  150.             $('[name=default3]').prepend("<option value='default'>请选择</option>").val('default');
  151.             // 禁用
  152.             $('[name=default3]').attr('disabled', 'disabled');
  153.         }
  154.  
  155.         // 获取所有复选框
  156.         var cks = $('input[name=ck]');
  157.         // 全选
  158.         $('[name=getAll]').click(function () {
  159.             if ($(this).is(':checked')) {
  160.                 cks.each(function () {
  161.                     $(this).prop('checked', true);
  162.                 });
  163.             } else {
  164.                 cks.each(function () {
  165.                     $(this).prop('checked', false);
  166.                 });
  167.             }
  168.         })
  169.  
  170.         // 反选
  171.         $('[name=fsAll]').click(function () {
  172.             cks.each(function () {
  173.                 $(this).prop('checked', !$(this).prop('checked'));// 简单写法
  174.             });
  175.             // 判断全选是否选中
  176.             if ($('input[name=getAll]').is(':checked'))
  177.                 $('input[name=getAll]').prop('checked', false);
  178.             else
  179.                 $('input[name=getAll]').prop('checked', true);
  180.         });
  181.  
  182.         // 添加点击事件
  183.         $('input[name=addCks]').click(function () {
  184.             var str = '';
  185.             // 追加内容
  186.             $('#oldContent').empty();// 清空之前数据
  187.             $('#newContent').empty();// 清空之前数据
  188.             cks.each(function () {   // 循环被选中的
  189.                 if ($(this).prop('checked'))
  190.                     str += this.value + ',';
  191.             });
  192.             $('#oldContent').append(str);
  193.             $('#newContent').append(ReturnCon(str));
  194.         })
  195.  
  196.         // 清空内容
  197.         $('input[name=rem]').click(function () {
  198.             $('#oldContent').empty();
  199.             $('#newContent').empty();
  200.         })
  201.         // 拆分方法
  202.         function ReturnCon(res) {
  203.             var result = '';
  204.             var arr = new Array();
  205.             arr = res.split(',');
  206.             for (var i = ; i < arr.length; i++) {
  207.                 result += arr[i];
  208.             }
  209.             return result;
  210.         }
  211.     </script>
  212. </body>
  213.  
  214. </html>

作者地址：https://www.cnblogs.com/FGang/p/11140901.html

jQuery 前端复选框 全选 反选 下拉菜单联动的更多相关文章

  1. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  2. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  3. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  5. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  8. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  9. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

随机推荐

  1. 201871010128-杨丽霞《面向对象程序设计（java）》第四周学习总结

    201871010128-杨丽霞<面向对象程序设计(java)>第四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh 这个 ...

  2. Python并发编程之进程通信

    ''' 进程间的通信 ''' """ multiprocessing模块支持进程间通信的两种主要形式:管道和队列 都是基于消息传递实现的, ""&qu ...

  3. 6-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(Wi-Fi模块SSL连接MQTT)

    5-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(配置MQTT的SSL证书,验证安全通信) 首先确定自己的固件打开了SSL,升级篇里面的固件我打开了SSL,如 ...

  4. C——swap

    /* swap.c */ /* function swap to swap two numbers */ #include <stdio.h> void swap(int*, int*); ...

  5. Linux系统中python默认版本为python2.7，修改为python3 项目上传码云

    # 查询系统本系统中安装的python版本 ls -l /usr/bin/python* 1.在虚拟机上新建虚拟环境 # 系统中python默认版本为python2.,可以将其修改为python3 # ...

  6. 浅谈C/C++回调函数（Callback）& 函数指针

    摘要:回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是 ...

  7. SQL 变形

    需求:共有协议X份,已签XX份,待签X份 sql: select count(1) 总记录数, sum(case when XY_STATUS='1' then 1 else 0 end)待签, su ...

  8. MybatisPlus使用代码生成器遇到的小问题

    MyBatisPlus 在3.0.3版本之前使用代码生成器因为存在默认依赖,所以不需要其他的依赖,项目中使用的是3.0.1的版本,所以不用添加其他依赖,添加之后反倒是会报错,实际上MP官网上已经说明了 ...

  9. Spring Security教程(三)

    在上一篇博客中讲解了用Spring Security自带的默认数据库存储用户和权限的数据,但是Spring Security默认提供的表结构太过简单了,其实就算默认提供的表结构很复杂,也不一定能满足项 ...

  10. java 获取类路径

    package com.jason.test; import java.io.File; import java.io.IOException; import java.net.URL; public ...