html实现全选/取消全选

效果：

 

js:

    //checkbox 全选/取消全选
    function checkAll(){
        //1.获取编号前面的复选框
        var checkAllEle = document.getElementById("box");
        //2.对编号前面复选框的状态进行判断
        if(checkAllEle.checked==true){
        //3.获取下面所有的复选框
        var checkOnes = document.getElementsByName("checkOne");
        //4.对获取的所有复选框进行遍历
        for(var i=0;i<checkOnes.length;i++){
            //5.拿到每一个复选框，并将其状态置为选中
            checkOnes[i].checked=true;
        }
        }else{
            //6.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //7.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
            //8.拿到每一个复选框，并将其状态置为未选中
            checkOnes[i].checked=false;
            }
        }
    }
    function check(){
        //1.获取编号前面的复选框
        var checkOnes = document.getElementsByName("checkOne");
        //2.设置一个计数器
        var a=0;
        //3.获取全选框的状态
        var checkAllEle = document.getElementById("box");
        //4.获取下面所有的复选框
        for(var i=0;i<checkOnes.length;i++){
            //5.如果复选框的状态是未选中
            if(checkOnes[i].checked==false){
                //6.设置全选框的状态为未选中
                checkAllEle.checked=false;
                //7.执行完毕关闭循环
                break;
            }
            //8.如果循环条件不成立，计数器加一
            a++;
        }
        //9.判断计数器是否与复选框的的数量相等
        if(a==checkOnes.length){
            //10.如果相等则设置全选框的状态为已选中
            checkAllEle.checked=true;
        }
    }

html

    <table>
        <thead>
        <tr style="background:white;">
            <td style="width:7%;"><input type="checkbox" id="box" onclick="checkAll()"/></td>
            <td style="width:10%;">姓名</td>
            <td style="width:5%;">性别</td>                    
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="checkbox"  onclick="check()" name="checkOne"/></td>
            <td>小红</td>
            <td>男</td>
        </tr>
        <tr>
            <td><input type="checkbox"  onclick="check()" name="checkOne"/></td>
            <td>小红</td>
            <td>男</td>
        </tr>
        </tbody>
    </table>