全选/全不选js

点击头部按钮，控制身部全选/全不选
身部按钮全选/全不选，控制头部全选全不选

示例图.png
图片.png

html部分

` <main>
    <table>
        <tr>
            <td>
                <input id="select_all" type="checkbox">
            </td>
            <td>人物</td>
            <td>职业</td>
        </tr>
    </table>
    <table id="td_ck">
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>德莱文</td>
            <td>射手</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>克烈</td>
            <td>战士</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>唐僧</td>
            <td>打野</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>亚托克斯</td>
            <td>战士</td>
        </tr>
    </table>
</main>

`

css部分

`<style>
    *{
        margin: 0;
        padding: 0;
    }
    main{
        width: 300px;
        margin: 20px auto;
    }
    table:nth-child(1){
        width: 100%;
        background: orange;
    }
    table:nth-child(1)>tr>td{
        font-weight: bolder;
        
    }
    table:nth-child(2){
        width: 100%;
        background: lightblue;
    }
    table{
        border-collapse: collapse;/* 合并边框 */
    }
    tr>td{
        border: 1px solid lightgray;
    }
    tr>td:first-child{
        width: 20%;
        text-align: center;
    }
    tr>td:nth-child(2){
        width: 45%;
        text-align: center;
    }
    tr>td:last-child{
        width: 25%;
        text-align: center;
    }
</style>`

js部分

`<script>
    //封装获取id
    function my$(id){
        return document.getElementById(id)
    }
    var inps=my$('td_ck').getElementsByTagName('input');
    //获取元素 注册点击事件 添加时间处理函数
    my$('select_all').onclick=function(){
        //todo 把table2中所有的checkbox 变成选中状态
        //for 把每一个checkbox变成全选中/全不选状态
        for(var i=0;i<inps.length;i++){
            inps[i].checked=this.checked  //this指向的就是select_all
        }     
    }
    //批量注册点击事件
    for(var i=0;i<inps.length;i++){
        inps[i].onclick=function(){
            //假设都选中
            var flag=true
            //排他思想
            for(var i=0;i<inps.length;i++){
                if(!inps[i].checked){
                    flag=false
                }
            }
            my$('select_all').checked=flag
        }
    }
</script>`