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

电玩女神 2023-07-03 04:34 32阅读 0赞

这个模块经常用得到  
成果图展示  
![在这里插入图片描述][20200201205746865.gif]  
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用了一个小技巧,利用一个变量来控制全选框的选中状态.

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

[20200201205746865.gif]: https://img-blog.csdnimg.cn/20200201205746865.gif