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 ...

随机推荐

ActiveMQ消息可靠性-事物
事物偏生产者,签收偏消费者设置为true,需要手动提交设置为false,自动提交使用手动提交的好处就是可以回滚,当整个事物提交时,里面的某条失败了,可以事物回滚,于是保证了数据的一致性 ...
ToDoList--HttpMediaTypeNotSupportedException
org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-url ...
mysql Navicat通过代理链接数据库
1.做完host 账号密码(数据库服务器)配置之后,选择ssh 2.配置代理服务器ip的登录的账号密码.(代理服务器必须可以连你的Navicat客户端和数据库服务器,不然怎么做代理.) 3.可以直接 ...
Shell基础、输入输出重定向
1.Shell的功能: (1)Shell是命令解释器,把我们写的命令转化为内核能够识别的机器语言,然后内核调用硬件来完成相应的操作.操作完成后,内核操作结果返回给内核,Shell再将机器语言翻译为我们 ...
ESA2GJK1DH1K开发教程: 来看看最新整理的整个开发板的教程大纲吧
项目开发:教程大纲(测试板型号:ESA2GJK1DH1K) 购买链接: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911deb ...
js之juery
目录 JQuery 属性选择器: 操作标签文本操作属性操作文档处理事件 JQuery 属性选择器: 属性选择器: [attribute] [attribute=value]// 属性等于 [a ...
C++ 重写虚函数的代码使用注意点+全部知识点+全部例子实现
h-------------------------- #ifndef VIRTUALFUNCTION_H #define VIRTUALFUNCTION_H /* * 派生类中覆盖虚函数的使用知识点 ...
Notepad++ 【自动完成】与【输入时提示函数参数】互相冲突，无奈
Notepad++ 既然可以在输入时提示函数参数,可是当提示函数参数的时候,输入具体参数时[自动完成]失效了. 一位用户遇到和我一样的问题:https://community.notepad-plus ...
Spring JDBC最佳实践(3)
原文地址:https://my.oschina.net/u/218421/blog/38598 spring jdbc包提供了JdbcTemplate和它的两个兄弟SimpleJdbcTemplate ...
angular数据请求 token验证
angualr的token 验证会经常用在登录,注册等地方对于token的使用方法按照以下步骤进行使用即可 1.新建一个服务 ng g service services /+服务名 eg:ng g ...

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

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

随机推荐

热门专题

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

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