<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Document
</title>
</head>
<body>
<input type="checkbox" id="d1">
全选/全不选
<br>
<a href="javascript:;" id="d2">
反选
</a>
<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;
console.log(a);
} else {
$('#form input').prop('checked', false);
a = 0;
console.log(a);
}
})
//取消一个取消全选
$('#form input').change(function() {
if ($(this).is(':checked')) {
a++;
console.log(a);
//勾选全部自动勾选全选
if (a == 4) {
$('#d1').prop('checked', 'checked')
}
} else {
$('#d1').prop('checked', false) a--;
console.log(a);
}
})
//反选
$('#d2').click(function() {
$('#form input').each(function() {
if ($(this).is(':checked')) {
//prop不能直接触发change事件
$(this).prop('checked', false).change();
console.log(a);
} else {
//prop不能直接触发change事件
$(this).prop('checked', 'checked').change() console.log(a);
}
})
})
</script>
</body>
</html>
来源: http://www.w3cfuns.com/notes/45455/f03e2f631354756621954f59d7bd76b9.html