checkebox 全选全不选，子复选框全部选中，全选框也会被选中，子复选框有一个没被选中，则全选框不被选中（js）

html部分

<!-- 全选、全不选、反选、子级全部选中则全选中，有一个没选中则不全选中 -->

    <table>
        <thead id="tHead">
            <tr>
                <th>
                    <input type="checkbox" id="Qxuan">全选
                </th>
                <th>商品</th>
                <th>价格</th>
            </tr>          
           
        </thead>
        <tbody id="tBody">
            <tr>
                <td>
                    <input type="checkbox" id="xuanze">
                </td>
                <td>phone Huawei</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="xuanze">
                </td>
                <td>pad Huawei</td>
                <td>600</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="xuanze">
                </td>
                <td>laptop Huawei</td>
                <td>6000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="fanXuan">反选
                </td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
           

js部分

<script>   
    //全选和全不选：点击全选按钮，如果子checkbox为选中状态，则变成不选中，为不选中状态，则变成选中状态
    //反选：点击反选按钮，子没被选中的变选中，选中的变没选中
    //子影响父：子中有一个没被选中，则全选按钮，不能被选中，子全部被选中，则全选变全选中
    
    //获取
    var Qxuan=document.getElementById('Qxuan');
    var xuanzes=document.querySelectorAll('#xuanze');
    var fanXuan=document.getElementById('fanXuan');

    //全选和全不选
    Qxuan.onclick=function(){
        for(var i=0;i<xuanzes.length;i++){
            xuanzes[i].checked=Qxuan.checked;
        }
    }

    //反选
    fanXuan.onclick=function(){
        for(var i=0;i<xuanzes.length;i++){
            if(xuanzes[i].checked==true){
                xuanzes[i].checked=false;
            }else if(xuanzes[i].checked==false){
                xuanzes[i].checked=true;
            }           
        }
    }
   
    //子影响父
    for(var i=0;i<xuanzes.length;i++){
        xuanzes[i].onclick=function(){
            //定义一个变量，假设表示当前子为全选
            var flag=true;
            //判断每一个子的当前状态，如有一个为选中则，flag变为true，全选的状态与flag相同
            for(var j=0;j<xuanzes.length;j++){
                if(!xuanzes[j].checked){
                    flag=false;
                }
            }
            Qxuan.checked=flag;
        }
    }

</script>