js 全选与反选

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS表格列表全选反选单选多选代码</title>

<style>
* {
padding:0;
margin:0;
}
.wrap {
width:300px;
margin:20px auto 0;
}
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 "微软雅黑";
}
tbody tr {
background-color:#f0f0f0;
}
tbody tr:hover {
cursor:pointer;
background-color:#fafafa;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧肉</td>
<td>小鸡炖蘑菇</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>糖醋里脊</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧狮子头</td>
<td>麻婆豆腐</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>日式肥牛</td>
<td>巫山烤鱼</td>
</tr>

</tbody>
</table>
</div>

<script>
var all = document.getElementById("j_cbAll");
var tbody = document.getElementById("j_tb");
var inp = tbody.getElementsByTagName("input");
all.onclick = function() {
for (var i = 0; i < inp.length; i++) {

inp[i].checked = this.checked;
}
};
for (var i = 0; i <inp.length; i++) {
inp[i].onclick = function() {
var flag = true;
for (var i = 0; i < inp.length; i++) {
if (!inp[i].checked) {
flag = false;
break;
}
}
all.checked = flag;
}
}
</script>

</body>
</html>

 

posted @ 2021-08-11 15:55  Gwaith  阅读(123)  评论(0)    收藏  举报