checked属性之表格全选反选单个选多个选
效果图如下：
直接上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>checked属性之表格全选反选单个选多个选</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px 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;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<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");//不引jq通过原生方式 通过Id获取表头
var tbody = document.getElementById("j_tb");//通过Id获取表格
var inputs = tbody.getElementsByTagName("input"); //获取指定标签名的对象的集合 input的checkbox
all.onclick = function () {
for (var i = 0; i < inputs.length; i++) { //点击全选遍历input，给每一个input选中
inputs[i].checked = this.checked;//checked 属性设置或返回 checkbox 是否应被选中。这个代码就能控制全选如果选中，下面每一个都会选中，如果全选没被选中，下面的都不会被选中
}
}
for (var i = 0; i < inputs.length; i++) { //遍历每一个input，点击input
inputs[i].onclick = function () {
var flag = true; //设置一个变量用于判断是否被选中
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].checked) { //如果下面的input未选中，flag就为false
flag = false;
}
}
all.checked = flag; //全选就会随着每一个input选中未选中而变化
};
}
</script>
</body>
</html>
