```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框选中按钮</title>
<style>
tr, td {
text-align: center;
}
</style>
</head>
<body>
<div align="center">
<table border="1px" cellspacing="0">
<tr>
<td><input type="checkbox" id="chkall" onclick="chk_all()">全选 <br></td>
<td>产品名称</td>
<td>价格(元)</td>
<td>数量</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" onclick="chk()"> <br></td>
<td>刘亦菲时尚芭莎杂志</td>
<td>25</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" onclick="chk()"> <br></td>
<td>刘亦菲明信片</td>
<td>20</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" onclick="chk()"> <br></td>
<td>刘亦菲唱片</td>
<td>52</td>
<td>8</td>
</tr>
</table>
<button id="del" onclick="chk_no()">删除选中的产品(全不选)</button>
<button id="unchk" onclick="unchk()">反选</button>
</div>
<script>
function chk_all() {
//通过全选钮的状态控制下边三个复选框的选择
var status = document.getElementById("chkall").checked; //代表当前选中状态,true代表当前选中
var arrChk = document.getElementsByName("chk");
if (status) {
for (var i = 0; i < arrChk.length; i++) {
arrChk[i].checked = true;
}
} else {
for (var i = 0; i < arrChk.length; i++) {
arrChk[i].checked = false;
}
}
}
//取消选中的(全不选)
function chk_no() {
//返回的是数组
var arrChk = document.getElementsByName("chk");
for (var i = 0; i < arrChk.length; i++) {
arrChk[i].checked = false;
}
document.getElementById("chkall").checked = false;
}
//反选
function unchk() {
var arrChk = document.getElementsByName("chk");
var times =0;
for (var i = 0; i < arrChk.length; i++) {
if (arrChk[i].checked) {
arrChk[i].checked = false;
} else {
arrChk[i].checked = true;
times++;
}
if(times==arrChk.length){
document.getElementById("chkall").checked=true;
}else {
document.getElementById("chkall").checked=false;
}
}
}
//子复选框全部选中,全选框也自动选中
function chk() {
var arrChk = document.getElementsByName("chk");
var times = 0;
for (var i = 0; i < arrChk.length; i++) {
if (arrChk[i].checked) {
times++;
}
}
if (times == arrChk.length) {
/* status=true; 是给status赋值,并没有改变标签*/
document.getElementById("chkall").checked = true;
} else {
document.getElementById("chkall").checked = false;
}
//如果有一个没有选,全选框也不选
if (times == 0) {
document.getElementById("chkall").checked = false;
}
}
</script>
</body>
</html>
javascript——实现全选(包括子复选框选中,全选框也选中)、全不选、反选等效果
最新推荐文章于 2024-07-24 11:09:48 发布