<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现全选取消反选</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$(".checkAll").on("click", function() {
var checked = $(this).prop("checked");
$(".checkChild").each(function(i) {
if ($(this).attr("disabled") != "disabled") {
$(this).prop("checked", checked);
}
});
});
$(".reverseCheck").on("click", function() {
$(".checkChild").each(function(i) {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
});
$(".checkChild").click(function() {
var flag = true;
$(".checkChild").each(function(i) {
if (!$(this).prop("checked")) {
flag = false;
}
});
if (flag) {
$(".checkAll").prop("checked", true);
} else {
$(".checkAll").prop("checked", false);
}
});
});
</script>
</head>
<body>
<h5>js实现全选取消</h5>
<input type="checkbox" name="checkAll" class="checkAll" />全选
<input type="checkbox" name="reverseCheck" class="reverseCheck" />反选
<input type="checkbox" name="checkChild" class="checkChild" />语文
<input type="checkbox" name="checkChild" class="checkChild" />数学
<input type="checkbox" name="checkChild" class="checkChild" />英语
<input type="checkbox" name="checkChild" class="checkChild" />地理
</body>
</body>
</html>
