实现效果

1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面；

2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示；

3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；

实现思路

1、获取所勾选的值组成的数组

定义一个数组checkValues，存放用户所勾选的内容。

再定义一个函数getValues()，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用innerText属性将数组展示到页面中。

捕获选框的onclick点击事件，当用户点击时，执行getValues()。

    // 显示选择内容的文字
    var checkText = document.getElementById("check_text");
    // 定义选择内容的数组
    var checkValues = [];
    
    // 根据复选框组勾选状态，获取当前已选择的值并渲染至页面
    function getValues(){
        // 数组置空
        checkValues=[];
        // 依次检查是否勾选，将勾选的内容放进数据
        for(var i = 0; i < checks.length; i++){
            if(checks[i].checked){
                checkValues.push(checks[i].value);
            }  
        }
        // 将选择的数组中的内容渲染至页面
        checkText.innerText = JSON.stringify(checkValues);
        checkText.style.color = "#09f"
    }

2、更新全选框状态及文字显示

定义一个判断是否全选的函数isCheckAll()，遍历选框数组checks，如果全部被选择，返回true，否则返回false。

捕获选框的click点击事件，当用户点击时，判断isCheckAll()的值，若为真，勾上全选框，并且更新提示文字；若为假，不勾选全选框，文字也为默认的“全选”。

    // 全选input勾选框
    var checkAll = document.getElementById("checkAll");
    // 检查列表复选框是否全部勾选
    function isCheckAll(){
        for(var i = 0; i < checks.length; i++){
            if(!checks[i].checked){
                return false;
            }  
        }
        return true;
    }
    
    // 根据全选框状态改变文字
    function changeText(){
        // 如果全选框是勾选的状态，提示文字变为“全不选”
        if(checkAll.checked){
            document.querySelector("dl>dt>label").innerHTML = "全不选";
        }else{
            document.querySelector("dl>dt>label").innerHTML = "全选";
        }
    }

3、反选

当反选按钮被点击时，遍历复选框，将选择状态全部置反，然后判断状态是否为全选

    // 点击“反选”，所有复选框状态取反
    ReverseCheck.onclick = function(){
        for(var i = 0; i < checks.length; i++){
            checks[i].checked = !checks[i].checked;
        }
        // 若点击反选时，全选框为选中状态，则取消选中
        if(checkAll.checked){
            checkAll.checked = false;
        }
        // 模拟列表点击事件，若反选后，复选框全部选中，则选中全选框，更改文字
        dd.click();
    }

完整代码

    
    
    
    
    


    

        

            
            全选
            反选
        
        

            

                
                one
            
            

                
                two
            
            

                
                three
            
            

                
                four
            
            

                
                five
            
            

                
                six
            
            

                
                seven
            
            

                
                eight
            
            

                
                nine
            
            

                
                ten
            
        
        
    
    
您所选择的内容包括：


    

        1、切换全选/全不选文字；
        

        

        2、根据选中个数更新全选框状态；