最近工作更忙了，博客已经十来天没更新了，今晚有空闲，懒得扒太麻烦的话题，聊一下简单的 JS 效果，这篇主要说的是选择框的全选联动。
我这里所说的全选联动是：
<label><input class="checkbox" type="checkbox" /> 选择框 1</label>
<label><input class="checkbox" type="checkbox" /> 选择框 2</label>
<label><input class="checkbox" type="checkbox" /> 选择框 3</label>
<label><input class="checkbox" type="checkbox" /> 选择框 4</label>
<label><input class="checkbox" type="checkbox" /> 选择框 5</label>
<label><input id="selectAll" type="checkbox" /> 全选</label>
以上六个选择框，且将最后一个叫全选选择框，其余叫其余选择框。
- 选中全选选择框，其余选择框均被选中；反选全选选择框，其余选择框均未选。
- 其余选择框都选中时，全选选择框也被选中；其余选择框只要有一项未被选中，全选选择框未选中。
这个 CSS 一般没法实现，但 CSS 的奇淫技巧，也不是第一次见识了，或许会有办法？这里还是说下 JS 实现。
第一个很好实现，只要全选选择框触发 change 事件时执行操作即可。
var checkboxes = document.getElementsByClassName('checkbox');
document.getElementById('selectAll').addEventListener('change', function(e) {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = e.target.checked;
}
}, false)
第二个无非就是判断多个选择框，如下：
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(e) {
var checked = true;
for (var n = 0; n < checkboxes.length; n++) {
if (!checkboxes[n].checked) {
checked = false;
}
}
document.getElementById('selectAll').checked = checked;
}, false)
}
这本是最常见的功能，购物车、后台管理等常用，本篇有些凑字数的感觉。
本文历史
- 2017 年 09 月 19 日 完成初稿