效果圖如下:點擊全選時會全部選中;全不選時全部不選;反選時反向選中.

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>

案例：全選與全不選及反選