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

利用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>
jquery实现购物车全选反选功能

猜你喜欢
