排他思想
如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法:
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式（留下自己人）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排他思想</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
var btns=document.getElementsByTagName('button');
for(var i = 0; i< btns.length;i++){
btns[i].onclick=function(){
//先把所有的按钮颜色去掉
for(var j=0;j<btns.length;j++){
btns[j].style.backgroundColor='';
}
//然后再让当前元素改变背景颜色
this.style.backgroundColor='blue';
}
}
</script>
</body>
</html>
结果演示
表单全选反选
<script>
// 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++) {
// 每次点击下面的任意一个复选框都要循环检查者4个小按钮是否全被选中
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
//循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (j_tbs[i].checked==false) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
</script>
结果演示
