全选及取消按钮

css内容部分：

<style>
             .wrap{
                width:300px;
                margin:200px auto;
             }
            table{
                width:300px;
            } 
            thead{
                background-color:#aaffff;
            }
           tr{
               text-align: center;
           }
        </style>

HTML内容部分：

<div class="wrap">
            <table border="1">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="All">
                            <!-- 复选框 -->
                        </th>
                        <th>商品</th>
                        <th>价格</th>
                    </tr>
                </thead>
            
            <tbod id="cd">
                <tr>
                    <td>
                        <input type="checkbox" class="s">
                    </td>
                    <td>HUAWEI</td>
                    <td>7100</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  class="s">
                    </td>
                    <td>oppo</td>
                    <td>4000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"  class="s">
                    </td>
                    <td>Xiaomi</td>
                    <td>4500</td>
                </tr>
            </tbod>
            </table>
        </div>

js内容部分：

var All=document.getElementById('All')//全选
            var cds=document.querySelectorAll(".s");
              //是j_cd类名里面的input
            All.οnclick=function(){
                for(var i=0;i<cds.length;i++){//for循环控制每一个复选框
                cds[i].checked=this.checked;//checked控制复选框中的选项                
                }
            }
            for(var i=0;i<cds.length;i++){
                cds[i].οnclick=function(){
                    var flag=true;
                    for(var i=0;i<cds.length;i++){
                     if(!cds[i].checked){
                         flag=false;
                         break;
                     }                         
                    }
                    All.checked=flag;
                }
            }