JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

 

练习地址：http://www.fgm.cc/learn/lesson2/12.html

 

总结：

 

1.  && 运算符，从左向右依次执行，如果遇到 false，就不再继续执行后面的语句。 相当于if(oInput[i].checked) {n++;}

oInput[i].checked && n++

2. n == oInput.length - 1;   这句话先判断 n是不是等于oInput.length - 1  （即checkbox全都选中了）？ 返回值 true/false ，再赋值给左边的oInput[0].checked

记住：这种类似于三元表达式的，都是先判断右边，再赋值给左边。

oInput[0].checked = n == oInput.length - 1;

3. 文字变化：全选/全不选， 也是公共事件，所以应该提取到公共函数里。 而不是单独给每个事件都加。

oBtn_selectAll.onclick = function()
        {
            checkOrNot(aBox);
            // oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
            // 这个应该放到公共函数里，因为点其他checkbox，或者点 反选，都会引起文字变化。
        };

 

疑问：

这个函数用var的形式写在window.onload里， 和用function写在window onload外面，区别是？？？

var checkOrNot = function ()
        {
            for(let i=0; i<aBox.length; i++)
            {
                if(oBtn_selectAll.checked==true)
                {
                    aBox[i].checked = true;
                }
                else
                {
                    aBox[i].checked = false;
                };
                
                oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
            };
        };

 

 

示例程序：

<script type="text/javascript">

window.onload = function ()
{
    var oA = document.getElementsByTagName("a")[0];    
    var oInput = document.getElementsByTagName("input");
    var oLabel = document.getElementsByTagName("label")[0];
    
    var isCheckAll = function ()
    {
        for (var i = 1, n = 0; i < oInput.length; i++)
        {
            oInput[i].checked && n++    
            // && 运算符，从左向右依次执行，如果遇到 false，就不再继续执行后面的语句。
            // 相当于if(oInput[i].checked) {n++;}
        }
        oInput[0].checked = n == oInput.length - 1;

        // n == oInput.length - 1;   返回值 true/false  赋值给左边。
        
        // 记住：这种类似于三元表达式的，都是先判断右边，再赋值给左边。

        oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
    };
    
    //全选/全不选
    oInput[0].onclick = function ()
    {
        for (var i = 1; i < oInput.length; i++)
        {
            oInput[i].checked = this.checked            
        }
        isCheckAll()
    };
    //反选
    oA.onclick = function ()
    {
        for (var i = 1; i < oInput.length; i++)
        {
            oInput[i].checked = !oInput[i].checked
        }
        isCheckAll()
    };
    //根据复选个数更新全选框状态
    for (var i = 1; i < oInput.length; i++)
    {
        oInput[i].onclick = function ()
        {
            isCheckAll()
        }    
    }    
}
</script>

 

自己的：

（逻辑还没完全理清，还要重写）

<script>
    window.onload = function()
    {
        var oBtn_selectAll = document.getElementsByTagName('input')[0];
        var oTxt_selectAll = document.getElementsByTagName('strong')[0];
        var oBtn_selectOrNot = document.getElementsByTagName('span')[0];
        var aBox = document.getElementsByTagName('ul')[0].getElementsByTagName('input');

        var checkOrNot = function ()
        // 这个函数用var的形式写在window.onload里， 和用function写在window onload外面，区别是？？？
        {
            for(let i=0; i<aBox.length; i++)
            {
                if(oBtn_selectAll.checked==true)
                {
                    aBox[i].checked = true;
                }
                else
                {
                    aBox[i].checked = false;
                };
                
                oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
            };
        };
        
        // 下面是范例公共函数部分的用法

        var isCheckAll = function ()
        {
            for (var i = 1, n = 0; i < oInput.length; i++)
            {
                oInput[i].checked && n++    
                // && 运算符，从左向右依次执行，如果遇到 false，就不再继续执行后面的语句。
                // 相当于if(oInput[i].checked) {n++;}
            }
            oInput[0].checked = n == oInput.length - 1;

            // n == oInput.length - 1;   返回值 true/false  赋值给左边。
            
            // 记住：这种类似于三元表达式的，都是先判断右边，再赋值给左边。

            oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
        };
        

        // 全选/全不选
        oBtn_selectAll.onclick = function()
        {
            checkOrNot(aBox);
            // oTxt_selectAll.innerHTML = oBtn_selectAll.checked? "全不选" : "全选";
            // 这个应该放到公共函数里，因为点其他checkbox，或者点 反选，都会引起文字变化。
        };

        // 反选
        oBtn_selectOrNot.onclick = function()
        {
            oBtn_selectAll.checked = oBtn_selectAll.checked == true? false:true; 

            checkOrNot(aBox);
        };
    };
    </script>