<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Document
</title>
</head>
<body>
<input type="checkbox" id="d1">
全选/反选
<br>
<form action="" id="form">
<input type="checkbox" name="demo" value="1">
<input type="checkbox" name="demo" value="2">
<input type="checkbox" name="demo" value="3">
<input type="checkbox" name="demo" value="4">
</form>
<script src="https://cdn.bootCSS.com/jquery/2.1.1/jquery.min.js">
</script>
<script>
var a = 0;
//全选复选事件
$('#d1').change(function() {
if ($(this).is(':checked')) {
$('#form input').prop('checked', 'checked');
a = 4;
} else {
$('#form input').prop('checked', false);
a = 0;
}
})
//取消一个取消全选
$('#form input').change(function() {
if ($(this).is(':checked')) {
a++;
//勾选全部自动勾选全选
if (a == 4) {
$('#d1').prop('checked', 'checked')
}
} else {
$('#d1').prop('checked', false) a--;
}
})
</script>
</body>
</html>
来源: http://www.w3cfuns.com/notes/45455/f03e2f631354756621954f59d7bd76b9.html