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;"><
<span style="color:darkblue;">三级联动菜单</span>></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 ...
随机推荐
- 20180606模拟赛T4——数学游戏
数学游戏 题目描述: 小T又发脑残了,没错,她又要求奇怪的东西,这次她想知道[X,Y]之间整数有多少可以表示成K个不同的B的幂的和形势.如\(x,y,k,b=15,20,2,2\),则有: \[17= ...
- Linux 换 jdk 版本 环境没有生效
Linux 换 jdk 版本 环境没有生效 把 jdk 1.7 换成 1.8, 路径设置好了后 用了下面两个都没有生效 . /etc/profile source ~/.bashrc 还是 jdk 1 ...
- CentOS7.5 系统最小化安装与初始化配置
CentOS7.5 系统最小化安装与初始化配置 1.安装标准化的系统 1.1.系统安装期间的语言 选择:中文-简体中文,安装完成也会默认支持中文输出,便于管理 1.2.时区选择 亚洲上海,CST时区( ...
- java 8 学习一（概述）
学习java8的新特性之前,简单看了下从java5开始历代版本的新特性,都是别人总结的. java5.java6.java7.java8的新特性 http://blog.csdn.net/samjus ...
- ESA2GJK1DH1K基础篇: 购买云服务器
我选择的是购买阿里云的服务器 如果是学生,可以选择 因为我用学生账户买过了,所以过程没法写了,下面我就写不用学生账户买的过程,其实应该配置过程和学生买差不多 选择购买的配置 选择系统 不需要配置直接下 ...
- docker 部署 jenkins
建议使用的Docker映像是jenkinsci/blueocean image(来自 the Docker Hub repository). 该镜像包含当前的长期支持 (LTS) 的Jenkins版本 ...
- c# EPPlus读取Excel里面的时间字段时，1900-01-01转成了1899-12-31
看到一篇文章:https://bbs.csdn.net/topics/70511379,5楼的回复: 我发现EXCEL有千年虫BUG,把1900年算成闰年了,2月有29天.1900年3月1日以后就没问 ...
- 20190802_Nginx基础
20190802_Nginx基础 文章主要内容: 关于中间件比较通俗易懂的解释 Nginx简述 Nginx环境配置以及安装 Nginx的目录和配置语法 Nginx日志_log_format Nginx ...
- Linux文件和目录管理
一.与文档相关的命令 1,命令head:用于显示文件前10行,后面直接跟文件名.如果加-n,则显示文件的前几行. 选项-n后有无空格均可也可以省略字母n,直接跟数字 2,命令tail:和命令head类 ...
- jquery插件实现瀑布流
jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...