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>