<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(function () {
/*全选功能的实现*/
$("#all").click(function () {
$(".item").attr("checked", $("#all").prop("checked"));
});
/*当checkbox全部被选中时，全选被勾选，否则不配勾选*/
$(".item").click(function () {
if ($("input[class='item']:checked").size() == 7) {
$("#all").attr("checked", true);
} else {
$("#all").attr("checked", false);
}
});
/*反选功能的实现*/
$("#ops").click(function () {
$(".item").each(function () {
$(this).attr("checked", !this.checked);
});
});
});
</script>
</head>
<body>
<label>全选</label><input type="checkbox" id="all" /><br />
<label>反选</label><input type="checkbox" id="ops" /><br />
<label>1,</label><input type="checkbox" class="item" /><br />
<label>2,</label><input type="checkbox" class="item" /><br />
<label>3,</label><input type="checkbox" class="item" /><br />
<label>4,</label><input type="checkbox" class="item" /><br />
<label>5,</label><input type="checkbox" class="item" /><br />
<label>6,</label><input type="checkbox" class="item" /><br />
<label>7,</label><input type="checkbox" class="item" /><br />
</body>
</html>