全选与反选
2019-10-09 本文已影响0人
王远清orz
<body>
<table border="1" cellpadding="0" cellspacing="0" width="200" id="">
<thead>
<tr>
<th><input type="checkbox" name="" id="allSelected"></th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td><input type="checkbox" name="1" id=""></td>
<td>苹果</td>
<td>2000</td>
</tr>
<tr>
<td><input type="checkbox" name="2" id=""></td>
<td>华为</td>
<td>3000</td>
</tr>
<tr>
<td><input type="checkbox" name="3" id=""></td>
<td>小米</td>
<td>4000</td>
</tr>
<tr>
<td><input type="checkbox" name="4" id=""></td>
<td>vivo</td>
<td>5000</td>
</tr>
</tbody>
</table>
<input type="button" id="btnInvert" value="反选">
<script type="text/javascript">
// 1.给全选按钮注册点击事件
var allSelected = document.getElementById('allSelected');
var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
allSelected.onclick = function () {
// 2.获取子复选框，并让其与父复选框保持一致
for( var i = 0 ; i < inputs.length; i++ ){
var input = inputs[i];
if (input.type === "checkbox") {
// 让子复选框的选中状态与父复选框状态一致
input.checked = this.checked;
}
}
}
// 3.给子复选框点击事件，如果所有子复选框都是选择状态，则allSelected是选择，否则反之；
// 给每个input注册点击事件
for( var i = 0; i<inputs.length;i++){
var input = inputs[i];
if(input.type !== "checkbox"){
continue;
}
input.onclick = function () { //这里的input是最后一个，所以需要再找一遍所有子复选框
checkAllChecked();
}
}
// 设置父复选框的状态，封装成函数，方便调用
function checkAllChecked() {
var isAllChecked = true; //假设全部选择
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== "checkbox") {
continue;
}
//如果有任意一个input.checked返回false，则isAllChecked = false;
if (!input.checked) {
isAllChecked = false;
}
allSelected.checked = isAllChecked;
}
}
// 4.给反选按钮注册点击事件
var btnInvert = document.getElementById('btnInvert');
btnInvert.onclick = function () {
// 5.让子复选框选中的变成未选中，未选中的变成选中
for( var i = 0; i < inputs.length; i++){
input = inputs[i];
if(input.type !== "checkbox"){
continue;
}
input.checked = !input.checked;
}
//6.设置父复选框的选中状态
checkAllChecked();
}
</script>
</body>
