jQuery 前端复选框全选反选下拉菜单联动

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="./dist/css/zTreeStyle.css">

    <title>Document</title>

</head>

<body>

    <div class="container">

        <div class="row">

            <div class="col-md-12">

                <p class="text-center" style="background:rgba(0, 0, 0, .075);">

                    <span style="background:lightcyan;">&lt;

                        <span style="color:darkblue;">三级联动菜单</span>&gt;</span>

                </p>

            </div>

            <div class="col-md-4">

                <label for="One">一级菜单</label>

                <select name="default1" id="input${1/(\w+)/\u\1/g}" class="form-control">

                    <option value="default">-- Select One --</option>

                </select>

            </div>

            <div class="col-md-4">

                <label for="Two">二级菜单</label>

                <select name="default2" id="input${1/(\w+)/\u\1/g}" class="form-control">

                    <option value="default">-- Select One --</option>

                </select>

            </div>

            <div class="col-md-4">

                <label for="Three">三级菜单</label>

                <select name="default3" id="input${1/(\w+)/\u\1/g}" class="form-control">

                    <option value="default">-- Select One --</option>

                </select>

            </div>

        </div>

        <div class="row">

            <div class="col-md-2">

                <div class="row">

                    <div class="col-md-4">

                        <input type="checkbox" name="getAll" id="getAll" value="全选" />

                        <br> 全选

                        <input type="checkbox" name="fsAll" id="fsAll" value="反选" />

                        <br> 反选

                        <input class="btn btn-primary" type="button" name="addCks" id="addCks" value="添加">

                        <input name="rem" id="rem" type="button" class="btn btn-danger" value="清空" />

                    </div>

                    <div class="col-md-6 chekboxContent">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                        <input type="checkbox" name="ck" value="">

                    </div>

                </div>

            </div>

            <div class="col-md-8">

                <p class="text-center" id="oldContent"></p>

                <p class="text-center" id="newContent"></p>

            </div>

        </div>

    </div>

    <script src="./dist/js/jquery.min.js"></script>

    <script src="./dist/js/bootstrap.min.js"></script>

    <script>

        $(function () {

            $('[name=defaultSel]').empty(); // 清空

            $('[name=defaultSel]').prepend("<option value='default'>请选择</option>").val('default');

            //----------------------------------------------------------------------------------------

            // 初始化清空数据

            $('[name=default1]').empty();

            $('[name=default1]').prepend("<option value='default'>请选择</option>").val('default');

            Empty2();

            Empty3();

            // 初始化加载数据

            // 第一个下拉菜单追加数据

            for (i = ; i <= ; i++) {

                $('[name=default1]').append("<option value='" + i + "'>" + i + "</option>");

            }

        })

        // 第一个下拉菜单选择事件

        $('[name=default1]').change(function () {

            if ($(this).val() === "default") {

                Empty2();

                Empty3();

            } else {

                Empty2();

                Empty3();

                for (i = ; i <= ; i++) {

                    $('[name=default2]').append("<option value=" + $(this).val() + i + ">" + $(this).val() + i + "</option>");

                    // 解除禁用

                    $('[name=default2]').removeAttr('disabled');

                }

            }

        });

        // 清空第二个下拉菜单

        function Empty2() {

            $('[name=default2]').empty();

            $('[name=default2]').prepend("<option value='default'>请选择</option>").val('default');

            // 禁用

            $('[name=default2]').attr('disabled', 'disabled');

        }

        // 第二个下拉菜单点击点击事件

        $('[name=default2]').change(function () {

            if ($(this).val() === 'default') {

                Empty3();

            } else {

                Empty3();

                for (i = ; i <= ; i++) {

                    $('[name=default3]').append("<option value=" + $(this).val() + ">" + $(this).val() + i + "</option>");

                    // 解除禁用

                    $('[name=default3]').removeAttr('disabled');

                }

            }

        });

        // 清空第三个下拉菜单

        function Empty3() {

            $('[name=default3]').empty();

            $('[name=default3]').prepend("<option value='default'>请选择</option>").val('default');

            // 禁用

            $('[name=default3]').attr('disabled', 'disabled');

        }

        // 获取所有复选框

        var cks = $('input[name=ck]');

        // 全选

        $('[name=getAll]').click(function () {

            if ($(this).is(':checked')) {

                cks.each(function () {

                    $(this).prop('checked', true);

                });

            } else {

                cks.each(function () {

                    $(this).prop('checked', false);

                });

            }

        })

        // 反选

        $('[name=fsAll]').click(function () {

            cks.each(function () {

                $(this).prop('checked', !$(this).prop('checked'));// 简单写法

            });

            // 判断全选是否选中

            if ($('input[name=getAll]').is(':checked'))

                $('input[name=getAll]').prop('checked', false);

            else

                $('input[name=getAll]').prop('checked', true);

        });

        // 添加点击事件

        $('input[name=addCks]').click(function () {

            var str = '';

            // 追加内容

            $('#oldContent').empty();// 清空之前数据

            $('#newContent').empty();// 清空之前数据

            cks.each(function () {   // 循环被选中的

                if ($(this).prop('checked'))

                    str += this.value + ',';

            });

            $('#oldContent').append(str);

            $('#newContent').append(ReturnCon(str));

        })

        // 清空内容

        $('input[name=rem]').click(function () {

            $('#oldContent').empty();

            $('#newContent').empty();

        })

        // 拆分方法

        function ReturnCon(res) {

            var result = '';

            var arr = new Array();

            arr = res.split(',');

            for (var i = ; i < arr.length; i++) {

                result += arr[i];

            }

            return result;

        }

    </script>

</body>

</html>

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

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

jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
Jquery表格变色复选框全选，反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
jQuery实现复选框全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...
复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
js 判断复选框全选、全不选、反选、必选一个
一个挺使用的 js 代码片段, 判断复选框全选.全不选.反选.必选一个记录下, 搬来的思路: 修改数据的选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图商品的列表代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

随机推荐

Ubuntu18.04安装redis-server启动出错
虽然报错原因可能是 redis-server.service: Can't open PID file /var/run/redis/re Aug 26 15:43:25 iZ2ze6ddwhet60 ...
模板语言、url
伪造一个数据库全局变量 (字典无序) USER_LIST 列表变字典(元祖和列表直接循环就好,字典涉及到k_v) UESR_DICT 遍历方法 1. 2. 3. 4. 5. 6.键入链接通过a标签包 ...
微信H5页面分享获取JS-SDK
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 微信开发文档: 生成签名之前必须先了解一下jsapi_ti ...
Kinect v2控制鼠标原理分析和源码
https://blog.csdn.net/baolinq/article/details/54381284 此程序为利用Kinect v2实现用手指隔空控制鼠标,是我另一个项目的一部分,因为在另外那 ...
Angle Beats Gym - 102361A（计算几何）
Angle Beats \[ Time Limit: 4000 ms \quad Memory Limit: 1048576 kB \] 题意给出 $n$ 个初始点以及 $q$ 次询问,每次 ...
postgresql plv8 安装
网上可以看到pg 9.6 版本的plv8容器镜像,没有pg 高版本的支持镜像,但是在基于原有dockerfile 进行构建的时候,居然失败了,有墙的问题,有版本的问题所以通过虚拟机尝试下构建方式安装 ...
python gevent协程
安装 pip install gevent import gevent from gevent import monkey monkey.patch_all()#捕捉所有阻塞,不止接收gevent.s ...
阿里云物联网平台: Android 连接阿里云物联网平台
说明这节是是为下一节做铺垫的只要是按照我提供的学习路线一节一节的认认真真学过来的,这节就十分的简单有了前两节的基础,这节呢咱让Android 连接阿里云物联网平台使用这节的代码 https: ...
【贪心】【P4053】[JSOI2007] 建筑抢修
[贪心][P4053][JSOI2007] 建筑抢修 Description 有 $n$ 个工作,第 $i$ 个工作做完需要 $a_i$ 的时间,并且必须在 $b_i$ 时刻前完成.求 ...
C语言实现聊天室软件
/* common.h */ /*服务器端口信息*/ #define PORTLINK ".charport" /*缓存限制*/ #define MAXNAMELEN 256 #d ...

jQuery 前端复选框 全选 反选 下拉菜单联动

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

随机推荐

热门专题

jQuery 前端复选框全选反选下拉菜单联动

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