jquery实现购物车全选反选功能

小鱼儿 2022-05-15 10:29 242阅读 0赞

利用jquery实现购物车中全选（反选）换图功能，具体代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
        <title>全选</title>
        <script language="JavaScript" type="text/javascript">
            document.documentElement.style.fontSize = document.documentElement.clientWidth /6.4 + 'px';
        </script>
        <style>
            label{
                display: block;
                border: solid 1px red;
                width:100%;
                height:.75rem;
                font-size: .24rem;
                line-height: .75rem;
                text-align: center;
                background: url("check.jpg") #fff no-repeat 2.5rem center;
                background-size: .37rem .37rem;
                margin-top: .5rem;
            }
            label input{
                opacity: 0;
            }
            .checked{
                background: url("checked.jpg") #fff no-repeat 2.5rem center;
                background-size: .37rem .37rem;
            }
        </style>
    </head>
    <body>
        <label ><input class="input1" type="checkbox"/>全选</label>
        <label><input  type="checkbox"  class="input"   />1</label>
        <label><input  type="checkbox"  class="input"   />2</label>
        <label><input  type="checkbox"  class="input"   />3</label>
        <script language="JavaScript" type="text/javascript" src="jquery-1.11.3.js"></script>
        <script language="JavaScript" type="text/javascript">
            $(function() {
                var allInput = $(".input1");
                allInput.click(function () {
                    if (this.checked == true) {
                        $(".input").prop('checked', true);
                        $("label").addClass("checked");
                    } else {
                        $(".input").prop('checked', false);
                        $("label").removeClass("checked");
                    }
                });
                $(".input").click(function () {
                    $(this).parent().toggleClass("checked");
                    var s = $(".input").length;
                    var a = $(".input:checked").length;
                    if (s == a) {
                        allInput.prop('checked', true);
                        allInput.parent().addClass("checked");
                    } else {
                        allInput.prop('checked', false);
                        allInput.parent().removeClass("checked");
                    }
                });
            });
    
        </script>
    
    </body>
    </html>