方式一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
//全选
$(function () {
$("#qx").click(function () {
$(".ck").prop("checked", true);
});
//全不选
$("#qbx").click(function () {
$(".ck").prop("checked", false);
});
//反选
$("#fx").click(function () {
$(".ck").each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked", false)
} else {
$(this).prop("checked", true);
}
});
});
//复选框统一控制
$("#all").click(function () {
//复选框的值等于统一控制复选框的值
$(".ck").prop("checked", $("#all").prop("checked"));
})
//当全部复选框选中,统一控制的复选框自动选中
$(".ck").click(function () {
if ($(".ck").length == $(".ck:checked").length) {
$("#all").prop("checked", true);
} else {
$("#all").prop("checked", false);
}
});
});
</script>
</head>
<body>
<input type="button" value="全选" id="qx">
<input type="button" value="全不选" id="qbx">
<input type="button" value="反选" id="fx">
<input type="checkbox" id="all"><br>
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
</body>
</html>
方式二:
<head>
<meta charset="UTF-8">
<title>全选全不选反选</title>
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
``
```javascript
$(function () {
//全选
$("#btn01").click(function () {
$("[name ='ck']").each(function () {
$(this).prop("checked",true);
});
});
//全不选
$("#btn02").click(function () {
$("[name ='ck']").each(function () {
$(this).prop("checked",false);
});
});
//反选
$("#btn03").click(function () {
$("[name ='ck']").each(function () {
if($(this).prop("checked")){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
});
});
});
</script>
</head>
<body>
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="button" value="全选" id="btn01">
<input type="button" value="全不选" id="btn02">
<input type="button" value="反选" id="btn03"><br>
</body>
</html>