首先构建HTML页面:
body:
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="theadInp" />
</th>
<th>英雄名</th>
<th>国籍</th>
</tr>
</thead>
<tbody id="tbody">
<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>
</body>
head:
<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-size: 16px ;
color: #fff;
}
td {
font-size: 14px;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
实现的效果
接下来实现全选功能:
当最上面的蓝色行的复选框被选中
下面的复选框也都要被选中
- 反之亦然
下面实现功能:
- 点击上面的的input,下面全选或者反选。
- 获取了上面的input按钮,只需要判断,checked属性是true还是false,
- 如果是true,下面的全部变成true;false同理。
<script>
window.onload = function () {
var topInp = document.getElementById("theadInp");
var tbody = document.getElementById("tbody");
var botInpArr = tbody.getElementsByTagName("input");
//绑定事件
topInp.onclick = function () {
//优化版(被点击的input按钮的checked属性值,直接作为下面的所有的input按钮的checked属性值)
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].checked = this.checked;
}
}
- 点击下面的的input,如果下面的全部选定了,上面的全选,否则相反。
- 思路:为下面的每一个input绑定事件,每点击一次都判断所有的按钮
- checked属性值是否全部都是true,如果有一个是false,
- 那么上面的input的checked属性也是false;
- 都是true,topInp的checked就是true;
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].onclick = function () {
//定义一个标识是true还是false的变量
//默认它为true
var bool = true;
//检测每一个input的checked属性值。
for(var j=0;j<botInpArr.length;j++){
if(botInpArr[j].checked == false){
bool = false;
}
}
topInp.checked = bool;
}
}
}
</script>
这样就实现了多选和反选的功能.