利用js实现购物车的全选和反选效果

这个模块经常用得到 成果图展示 HTML和css代码

--------css-----------
<style>
    table{
          
   
        margin: 100px auto;
        width: 500px;
        text-align: center;
    }
    thead{
          
   
      background-color: silver;
    }
    tr{
          
   
        height: 30px;
    }
</style>

--------------------HTML------------
 <table border="1" cellspacing="0" cellpadding="0" >
        <thead>
            <tr>
            <td><input type="checkbox" id="ipt">全选</td>
            <td>品牌</td>
            <td>价格</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>苹果</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>华为</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>三星</td>
                <td>3000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>华为</td>
                <td>3500</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>oppo</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>

写js用了一个小技巧,利用一个变量来控制全选框的选中状态.

<script>
        //获取第一个
       var ipt = document.getElementById("ipt");
       //获取另外5个
       var ipts = document.querySelector("tbody").querySelectorAll("input");
        //第一步,点击全选,让下面的复选框都变成选中状态.
        ipt.onclick = function(){
          
   
            //这里的this指向ipt
            //this.checked可以获取到复选框的选中状态. true就是选中状态,Flase就是未选中.
            for(var i=0; i<ipts.length; i++){
          
   

               ipts[i].checked = this.checked; 
            }
        }
        //第二步,下面的复选框都是选中状态的时候,上面的全选也跟随选中状态
        //遍历,绑定点击事件
        for(var i=0; i<ipts.length; i++){
          
   
                ipts[i].onclick = function(){
          
   
                var a = true;  //控制全选框是否选中
                 //当我选中一个,也要判断这五个有没有在选中状态.
                for(var i=0; i<ipts.length; i++){
          
   
                    //如果没有全部在选中状态,就进入
                    if(!ipts[i].checked){
          
     //
                           a = false;
                    }
                }
                ipt.checked = a; //如果五个都在选中状态,就不用进入循环.    
            }
        }
           
    </script>

平时开发中都会用到的一个模块,大家一起学. 希望大家喜欢,