dom全选和反选

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }

        table {
            margin: 20px auto;
        }
    </style>

<div class="wrap">
        <table cellspacing="20">
            <tr>
                <th><input type="checkbox" value="全选" id="all" /></th>
                <th>产品</th>
                <th>价钱</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="check" /></td>
                <td>iphone</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check" /></td>
                <td>iwatch</td>
                <td>2000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check" /></td>
                <td>ipad</td>
                <td>3000</td>
            </tr>
        </table>
        <input type="button" class="inverse" value="反选" />

 <script>
            var btnAll = document.querySelector("#all"); // 全选按钮
            var checkArr = document.querySelectorAll(".check"); // 商品按钮组
            var inverse = document.querySelector(".inverse");//反选按钮

            //全选按钮
           btnAll.onclick =function(){
               //获取全选按钮状态
               var state = this.checked
               for(var i =0;i<checkArr.length;i++){
                   checkArr[i].checked=state//如果全选按钮被选中,商品按钮组也都选中
               }
           }

           //反选按钮
           inverse.onclick = function(){
               for(var i =0;i<checkArr.length;i++){
                   checkArr[i].checked=!checkArr[i].checked//点击反选按钮,商品组的按钮状态与原来相反
               }
               isAllchecked()//如果全选按钮选中了,点击反选按钮取消(由于商品组按钮被取消,所以全选按钮也取消)
           }

           //如果商品组按钮都选中,全选按钮自动选中(当每一次商品组按钮状态发生改变时,都要判断是否全选)
           for(var i =0;i<checkArr.length;i++){
               checkArr[i].onclick=function(){
                   isAllchecked()
               }
           }
           //判断商品是否全选
           function isAllchecked (){
               var flag = true//假设都选中
               for(var i =0;i<checkArr.length;i++){
                   if(!checkArr[i].checked){
                       flag=false//如果有一个没被选中,就返回flase
                       break
                   }
               }
               btnAll.checked=flag//全选按钮的状态跟着flag的值变化
           }
        </script>

dom全选和反选

悦读