dom—排他思想

排他思想是在页面进行交互时常常用到，顾名思义就是只有当前操作的元素拥有，其余元素无此样式、效果或者事件。

如若有同一组元素，我只想要其中的一个元素实现某种样式，则需要用到循环的思维进行排他算法：

①：在进行交互之前清楚全部样式(干掉所有人)

②：给当前操作元素设置样式(留下我自己)

③：顺序不能错乱，首先干掉所有人，再考虑自己

案例：表单全选取消全选功能

需求：

①：点击全选复选框，下面所有复选框都改为选中状态

②：再次点击全选复选框，下面所有复选框改为未选中状态，即取消全选

③：如果下列复选框全部为选中状态，全选复选框则自动变为选中状态

④：下列复选框若有一个不是选中状态，全选复选框则不会被选中

        // 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。