简单的jquery实现购物车全选按钮

在我们去完成一个电商平台这种项目的时候，你会发现购物车有一个全选的功能，这个功能我们可以通过jquery来实现

首先是我们的Html页面

 <table class="table table-bordered">
        <thead>
            <tr>
                <th><input type="checkbox" class="styled"></th>
                <th>用户id</th>
                <th>用户名</th>
                <th>电子邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"  class="sty" /></td>
                <td>1</td>
                <td>小明</td>
                <td>2393724001@qq.com</td>
                <td><a class="buttons">删除</a></td>
            </tr>
        </tbody>
    </table>

在页面上就是这样的一个效果，但是现在我们的全选按钮没有效果，需要我们为他添加事件

1.全选影响单独的

 $(".styled").change(function () {
 				//先判断这个全选的是不是选中了
                if ($(".styled").prop("checked") == true) {
                    //选中了就下面所有的checked选中
                    $(".sty").prop("checked", true);
                } else {
                    $(".sty").prop("checked", false);
                }
            });

2.单独的影响全选的

 $(".sty").change(function () {
                var lis = $(".sty");
                var liss = true;
                //for循环判断每个商品的选择框是不是选中了
                for (var i = 0; i < $(".sty").length; i++) {
                    if (liss = liss && $(lis[i]).prop("checked") == true) {
                        $(".styled").prop("checked", true);
                    } else {
                        $(".styled").prop("checked", false);
                    }
                }
            });

来源：CSDN

作者：ヾ(*・▽・)ﾂ好嗨呀

链接：https://blog.csdn.net/qq_44727409/article/details/103586328