JavaScript 复选框全选和取消全选效果
分类：实例代码
分享一段代码实例，它利用原生JavaScript实现了复选框的全选和不全选效果。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
padding: 0;
margin: 0;
}
#_head {
background-color: green;
}
#_head {
text-align: center;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
text-align: center;
}
</style>
</head>
<body>
<div id="wrapbox">
<table>
<thead id="_head">
<tr>
<th><input type="checkbox" id="qx"></th>
<th>菜名</th>
<th>厨师</th>
<th>价格</th>
</tr>
</thead>
<tbody id="_tbody">
<tr>
<td><input type="checkbox"></td>
<td>红烧鱼</td>
<td>张一</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>红烧肉</td>
<td>张二</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>红烧狮子头</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>红烧小青菜</td>
<td>张四</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
<script>
var qx = document.getElementById('qx');
var tbody = document.getElementById('_tbody')
var inputs = tbody.getElementsByTagName("input");
qx.onclick = function() {
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i]
input.checked = qx.checked;
}
}
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = function() {
var flag = true;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.checked == false) {
flag = false;
}
if (flag == true) {
qx.checked = true;
} else {
qx.checked = false;
}
}
}
}
</script>
</body>
</html>
JavaScript 复选框全选和取消全选效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript 复选框全选和取消全选效果就介绍到这了。
JavaScript 复选框全选和取消全选效果属于前端实例代码，有关更多实例代码大家可以查看。