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

90 阅读 0 评论 60 点赞

我是靠谱客的博主落寞手机，最近开发中收集的这篇文章主要介绍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+)/u1/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+)/u1/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+)/u1/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="1">
<input type="checkbox" name="ck" value="2">
<input type="checkbox" name="ck" value="3">
<input type="checkbox" name="ck" value="4">
<input type="checkbox" name="ck" value="5">
<input type="checkbox" name="ck" value="6">
<input type="checkbox" name="ck" value="7">
<input type="checkbox" name="ck" value="8">
<input type="checkbox" name="ck" value="9">
<input type="checkbox" name="ck" value="10">
<input type="checkbox" name="ck" value="11">
<input type="checkbox" name="ck" value="12">
<input type="checkbox" name="ck" value="13">
<input type="checkbox" name="ck" value="14">
<input type="checkbox" name="ck" value="15">
<input type="checkbox" name="ck" value="16">
<input type="checkbox" name="ck" value="17">
<input type="checkbox" name="ck" value="18">
<input type="checkbox" name="ck" value="19">
<input type="checkbox" name="ck" value="20">
<input type="checkbox" name="ck" value="21">
<input type="checkbox" name="ck" value="22">
<input type="checkbox" name="ck" value="23">
<input type="checkbox" name="ck" value="24">
</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 = 1; i <= 10; i++) {
$('[name=default1]').append("<option value='" + i + "'>" + i + "</option>");
}
})
// 第一个下拉菜单选择事件
$('[name=default1]').change(function () {
if ($(this).val() === "default") {
Empty2();
Empty3();
} else {
Empty2();
Empty3();
for (i = 0; i <= 9; 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 = 0; i <= 9; 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 = 0; i < arr.length; i++) {
result += arr[i];
}
return result;
}
</script>
</body>
</html>