P11 全选、不选和反选

本小结的学习重点是：

　　1、复习window.onload = function () {}的使用场景

　　　　当我们的js代码是写在header中的时候，就需要使用window.onload了，避免浏览器不知道页面中的标签是什么导致报错。

　　　　根本原因就是浏览器在加载页面的时候，是按照从上到下的顺序依次加载的，我们在js中编写的时候有可能会提前使用一些标签。

　　　　如果不是写在window.onload的函数里面的话，就会引起浏览器不清楚你在js中使用的还没有加载到的标签是啥而保存的情况出现。

　　2、使用getElementsByTagName（）方法的场景

　　　　这个方法时候是根据标签的名称来选择标签的；

　　　　如果在html页面中有多个相同的标签，那么使用该方法会将所有的标签都选取出来，返回值是一个数组；

　　　　我们可以使用遍历的方式来对数组中的每一个标签进行处理。

下面是本节代码，仅供参考：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选, 不选和反选</title>
    <script>
        window.onload = function () {
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var oBtn3 = document.getElementById('btn3');
            var oDiv = document.getElementById('div1');
            /* 
            这里就可以看到, 我们可以通过oDiv来选中标签中的所有input标签
            并且不会选中按钮, 这就是为什么要将所有的选择框放在div标签中的原因.
             */
            var oCheckBox = oDiv.getElementsByTagName('input');
            // 给oBtn1按钮添加一个点击事件, 这样写的好处就是不需要再给这个函数取名字了.
            oBtn1.onclick = function () {
                for (let i = 0; i < oCheckBox.length; i++) {
                    oCheckBox[i].checked = true; // 全选
                }
            }

            oBtn2.onclick = function () {
                for (let i = 0; i < oCheckBox.length; i++) {
                    oCheckBox[i].checked = false; // 全选
                }
            }

            oBtn3.onclick = function () {
                for (let i = 0; i < oCheckBox.length; i++) {
                    /* oCheckBox[i].checked = true; // 全选
                    if(oCheckBox[i].checked == true){
                        oCheckBox[i].checked = false;
                    }else{
                        oCheckBox[i].checked = true;
                    } */
                    
                    // 使用三目表达式来替换分支条件语句
                    oCheckBox[i].checked = oCheckBox[i].checked == true ? false : true;
                }
            }
        }
    </script>
</head>

<body>
    <input id="btn1" type="button" value="全选">
    <input id="btn2" type="button" value="不选">
    <input id="btn3" type="button" value="反选">
    <!-- 
        注意: 这里的把所有的选择框都放在一个div标签中, 是为了方便全部选中
     -->
    <div id="div1">
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
        <input type="checkbox"></br>
    </div>
</body>

</html>