全选反选
全选和反选功能，在开发中可以说是应用得非常多的，以下通过案例分解，学习如何使用JS实现全选反选功能。
该功能可分为如下三大步骤：
1、全选
1.1 获取父checkbox，注册点击事件
1.2 获取所有的子checkbox，让所有子checkbox的状态跟父checkbox保持一致
html和css代码
<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;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style> <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>小米Mix2s</td>
<td>3000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>华为P30</td>
<td>3800</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>小米手环</td>
<td>200</td>
</tr> </tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
// 1、全选
// 父checkbox,子checkbox
// 1.1 获取父checkbox，注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
// 1.2 获取所有的子checkbox，让所有子checkbox的状态跟父checkbox保持一致
var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
//遍历，将所有子checkbox状态改为跟父checkbox状态一致
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
//将子checkbox状态跟父checkbox状态保持一致
input.checked = this.checked;
}
}
}
2、 当点击子checkbox，如果所有的子checkbox已经被选中，则选中父checkbox，如果有一个子checkbox没有被选中，则不选中父checkbox
（1）循环，判断是否是复选框，若是，则注册点击事件
（2）点击按钮时，判断所有的子checkbox是否都选中，如果都选中，则父checkbox状态设置为选中，如果有一个子checkbox没选中，则父checkbox设置为不选中
以下代码是在第一步骤基础上写的，包括了第一部分的代码
var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
var j_cbAll = document.getElementById('j_cbAll');
// 1、全选
// 父checkbox,子checkbox
// 1.1 获取父checkbox，注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
// 1.2 获取所有的子checkbox，让所有子checkbox的状态跟父checkbox保持一致
//遍历，将所有子checkbox状态改为跟父checkbox状态一致
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
//将子checkbox状态跟父checkbox状态保持一致
input.checked = this.checked;
}
}
}
//1.3 当有一个子checkbox没有被选中时，父checkbox应当不选中，当所有的子checkbox都选中时，应当选中父checkbox
// 给每一个子checkbox注册事件
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//如果不是复选框，则不绑定事件
if (input.type !== 'checkbox') {
continue;
}
input.onclick = function () {
//假设所有子checkbox都已经选中
var allChecked = true;
console.log(inputs);
//判断所有子checkbox是否选中
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
//如果不是复选框，则跳到写一次循环
if (input.type !== 'checkbox') {
continue;
}
if (!input.checked) {
allChecked = false;//如果有没选中的
break;
}
}
//同步父checkbox和子checkbox的状态
j_cbAll.checked = allChecked;
}
}
3、反选
当点击反选按钮时，将所有的子的checkbox状态取反，然后同步父的checkbox的状态。 以下代码是在第二步骤基础上写的，包括了第二部分的代码
var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
var j_cbAll = document.getElementById('j_cbAll');
// 1、全选
// 父checkbox,子checkbox
// 1.1 获取父checkbox，注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
// 1.2 获取所有的子checkbox，让所有子checkbox的状态跟父checkbox保持一致
//遍历，将所有子checkbox状态改为跟父checkbox状态一致
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
//将子checkbox状态跟父checkbox状态保持一致
input.checked = this.checked;
}
}
}
//1.3 当有一个子checkbox没有被选中时，父checkbox应当不选中，当所有的子checkbox都选中时，应当选中父checkbox
// 给每一个子checkbox注册事件
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//如果不是复选框，则不绑定事件
if (input.type !== 'checkbox') {
continue;
}
input.onclick = function () {
checkAllCheckBox();
}
}
// 2、反选
// 1、给反选按钮注册事件
var btn = document.getElementById('btn');
btn.onclick = function () {
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 2、判断是否是checkbox
if (input.type !== 'checkbox') {
continue;
}
// 3、给所有的子checkbox反选
input.checked = !input.checked;
}
// 问题：当选中或取消所有子checkbox时，父checkbox没改变状态
// 4、判断父的checkbox的状态，根据该状态同步父子checkbox状态
checkAllCheckBox();
}
//封装子checkbox和父checkbox的状态同步功能
function checkAllCheckBox() {
//假设所有子checkbox都已经选中
var allChecked = true;
//判断所有子checkbox是否选中
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
//如果不是复选框，则不绑定事件
if (input.type !== 'checkbox') {
continue;
}
if (!input.checked) {
allChecked = false;//如果有没选中的
}
}
//同步父checkbox和子checkbox的状态
j_cbAll.checked = allChecked;
}
全选和反选小结：
1、给反选按钮注册事件
2、判断是否是checkbox
3、给所有的子checkbox反选
4、判断父的checkbox的状态，根据该状态同步父子checkbox状态