jQuery 实现全选多选反选
Posted Yan Yang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 实现全选多选反选相关的知识，希望对你有一定的参考价值。
学习内容：
需求
jQuery 实现全选、多选、反选
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选</title>
<script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
</script>
<script>
function checkChange(src) {
// 根据被点击的复选框，来决定下面这些爱好的复选框的选中状态
var checked = $(src).prop('checked');
checkAll(checked);
}
function checkAll(flag) {
$('[name=hobby]').prop('checked', flag);
// 点击全选按钮的时候，最上面复选框要选中
// 点击全不选按钮的时候，最上面复选框不要选中
$('#checkAll').prop('checked', flag);
}
// 反选
function checkUnAll() {
$('[name=hobby]').each(function (i, domEle) {
// 获取其选中状态
var oldValue = $(domEle).prop('checked');
// 取反
var newValue = !oldValue;
// 再设置回去
$(domEle).prop('checked', newValue);
// $(domEle).prop('checked', !$(domEle).prop('checked'));
});
// 点击反选，若爱好全选中，最上面复选框要选中，反之不要选中
check();
}
$(function () {
// 点击所有爱好复选框，若爱好全选中，最上面复选框要选中，反之不要选中
$('[name=hobby]').click(function () {
check();
});
});
function check() {
var total = true; // 统计
$('[name=hobby]').each(function (i, domEle) {
var checked = $(domEle).prop('checked'); // 取每个爱好选中状态值
total = total && checked; // 跟变量 total 与并设置存到变量 total 中
});
// 当遍历结束的时候，total 值仍是 true, 那么代表所有爱好复选框是选中的
$('#checkAll').prop('checked', total);
}
</script>
</head>
<body>
请选择你的爱好:<br/>
<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选
<br/>
<div>
<input type="checkbox" name="hobby"/>JAVA
<input type="checkbox" name="hobby"/>打篮球
<input type="checkbox" name="hobby"/>上网
<input type="checkbox" name="hobby"/>撩妹
</div>
<div>
<input type="button" id="btn_checkAll" onclick="checkAll(true)"
value="全选"/>
<input type="button" onclick="checkAll(false)" value="全不选"/>
<input type="button" onclick="checkUnAll()" value="反选"/>
</div>
</body>
</html>
总结：
以上就是用 jQuery 实现全选、多选、反选，代码的简单实现了，仅供参考，欢迎讨论交流。
以上是关于jQuery 实现全选多选反选的主要内容，如果未能解决你的问题，请参考以下文章