jQuery实现全选取消反选
<!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><script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>