按钮全选 -- 取消全选操作

1.html代码：

<table>
    <thead>
        <tr>
            <th>
                <input type="checkbox"  id="all"/>
            </th>
                <th>商品</th>
            <th>型号</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody id="tbs">
        <tr>
            <th>
                <input type="checkbox" />
            </th>
            <th>小米</th>
            <th>10</th>
            <th>4299</th>
        </tr>
        <tr>
            <th>
                <input type="checkbox" />
            </th>
            <th>荣耀</th>
            <th>20pro</th>
            <th>2999</th>
        </tr>
        <tr>
            <th>
                <input type="checkbox" />
            </th>
            <th>iphone</th>
            <th>8plus</th>
            <th>5666</th>
        </tr>
    </tbody>            
</table>                                            

 

2.js代码：

var all = document.getElementById('all'); //得到全选按钮
var tbs = document.getElementById('tbs').querySelectorAll('input');  //按钮
    all.onclick = function(){
        for(var i =0; i<tbs.length;i++){
            tbs[i].checked = this.checked; //checked 判断按钮是否选中
        }                
    }            
    for(var i =0; i<tbs.length; i++){
        tbs[i].onclick = function(){
            var flag = true;
            for(var i = 0;i<tbs.length;i++){
                if(!tbs[i].checked){
                    flag = false;
                    break;
                }
                        
            }
            all.checked = flag;
        }
    }