排他思想是在页面进行交互时常常用到,顾名思义就是只有当前操作的元素拥有,其余元素无此样式、效果或者事件。
如若有同一组元素,我只想要其中的一个元素实现某种样式,则需要用到循环的思维进行排他算法:
①:在进行交互之前清楚全部样式(干掉所有人)
②:给当前操作元素设置样式(留下我自己)
③:顺序不能错乱,首先干掉所有人,再考虑自己
案例:表单全选取消全选功能
需求:
①:点击全选复选框,下面所有复选框都改为选中状态
②:再次点击全选复选框,下面所有复选框改为未选中状态,即取消全选
③:如果下列复选框全部为选中状态,全选复选框则自动变为选中状态
④:下列复选框若有一个不是选中状态,全选复选框则不会被选中
// 1. 全选和取消全选做法: 让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function() {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中,如果是false 就是未选中
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 2. 下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
分析:
1 全选和取消全选的实际操作:让下列所有复选框的状态(checked属性)跟随全选按钮的一致即可。
2 下列复选框需要全部选中,全选复选框才会选中的实际操作:通过循环遍历下列复选框并绑定点击事件,每次点击时进行判断,当前复选框是否为选中状态,如果没有选中,则全选复选框就是不选中状态,如果当前复选框是选中的状态,则进行判断其余复选框是否处于选中状态。如果是 则改为true。