案例：全选与全不选及反选

Posted 2021-01-09 gengzhong

效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中.

html结构代码:

<input class = ‘check‘ type="checkbox" >
<input class = ‘check‘ type="checkbox">
<input class = ‘check‘ type="checkbox">
<input class = ‘check‘ type="checkbox">
<input class = ‘check‘ type="checkbox">

<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">

js代码实现过程:

   /*一：需求分析：
            (1)点击全选：选中所有选择框（设置checked属性为true）
            (2)点击全不选：不选中所有选择框（设置checked属性为false）
            (3)点击反选：让每一个选择框的checked属性与自身相反
       二：思路分析
                1.获取元素
                2.注册事件
                3.事件处理
    */

    //1.获取页面元素
    var checkAll = document.getElementById(‘checkAll‘);//全选
    var unCheckAll = document.getElementById(‘unCheckAll‘);//全不选
    var reverseCheck = document.getElementById(‘reverseCheck‘);//反选
    var checkList = document.getElementsByClassName(‘check‘);//选择框列表

    //2.注册事件

    //2.1 全选
    checkAll.onclick = function(){
        //3.事件处理：选中所有选择框（设置checked属性为true）
        for(var i = 0;i<checkList.length;i++){
            checkList[i].checked = true;
        }
    }

    //2.2 全不选
    unCheckAll.onclick = function(){
        //3.事件处理:不选中所有选择框（设置checked属性为false）
        for(var i = 0;i<checkList.length;i++){
            checkList[i].checked = false;
        }
    }
    //2.3 反选
    reverseCheck.onclick = function(){
        //3.事件处理:让每一个选择框的checked属性与自身相反
        for(var i = 0;i<checkList.length;i++){
            checkList[i].checked = !checkList[i].checked;//逻辑非取反
            // if (checkList[i].checked == true){
            //     checkList[i].checked = false;
            // }else{//false
            //     checkList[i].checked = true;
            // }
        }
    }
</script>