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

随机推荐

201871010112-梁丽珍《面向对象程序设计（java）》第四周学习总结
项目内容这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
UiPath： Selectors repair 选择器的修复，即被选择的按钮发生改变如何选择第二按钮
实现批量注册用户功能时,出现第一个用户注册完时,弹出确认按钮,点击即可,但是第二个用户注册完成时,弹出的按钮与第一个有差异,图形用户界面元素及其父元素的属性都发生改变.所以就点不了按钮,就卡死在这.如 ...
Django 购物车模板
url from django.contrib import admin from django.urls import path, re_path from django.urls import i ...
总结：几种生成html格式测试报告的方法
写自动化测试时,一个很重要的任务就是生成漂亮的测试报告. 1.用junit或testNg时,可以用ant辅助生成html格式: <target name="report" d ...
Qt常用类——Qstring
Qstring有一些方面跟C/C++中的string的使用,例如把一个字符串追加到另一个字符串中,也是用“+”.也有append函数等. 下面是是Qstring的一些常用的具体函数示例: Qt的QSt ...
__int128 输入输出模板
#include <bits/stdc++.h> using namespace std; void scan(__int128 &x)//输入 { x = ; ; char ch ...
java 栈
package testjavapro; import java.util.*; public class testjava { static void showpush(Stack<Integ ...
2018-2019-2 20165315《网络对抗技术》Exp7 网络欺诈防范
2018-2019-2 20165315<网络对抗技术>Exp7 网络欺诈防范一.实验内容本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有简单应 ...
WebGPU学习（七）：学习“twoCubes”和“instancedCube”示例
大家好,本文学习Chrome->webgpu-samplers->twoCubes和instancedCube示例. 这两个示例都与"rotatingCube"示例差不 ...
POJ-数据结构-优先队列模板
优先队列模板优先队列是用堆实现的,所以优先队列中的push().pop()操作的时间复杂度都是O(nlogn). 优先队列的初始化需要三个参数,元素类型.容器类型.比较算子. 需要熟悉的优先队列操作 ...

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

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

随机推荐

热门专题

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

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