购物车 全选效果

html代码：

<div class="car-top">
<span class="quan yuan"><img src="~/Content/images/green-dui.png"></span><span>全选</span>
</div>
@foreach (var item in Model.Cart.Lines)
{
<div class="car-list">
<a class="edit">编辑</a>
<div class="pro-intro-item">
<span class="yuan1 yuan"><img src="~/Content/images/red-dui.png" class="zly-dui"></span>
<span class="pro-intro-img"><img src="@item.Product.ProImg"></span>
<div class="pro-intro-font c">
<p class="pay-p">
<span>@item.Product.ProName</span>
<span class="pro-intro-price">@item.Product.ProPrice</span>
</p>
<p class="pay-p">
<span>@item.Color</span>
<span class="pro-intro-num">× @item.Quantity</span>
</p>
</div>
<div class="pro-intro-font c1" style="display:none;">
<button class="btn btn-warning del">删除</button>
<ul class="num">
<li class="reduce cannot_select">-</li>
<li><input class="text Quantity" name="Quantity" id="Quantity" value="1" type="text" readonly></li>
<li class="add cannot_select">+</li>
</ul>
</div>
</div>
</div>
}

 

js代码：主要在于遍历

$(".yuan img,.yuan1 img").hide();
$(".quan").click(function () {
$(this).find("img").toggle();
$(".yuan1").find("img").css("display", $(this).find("img").css("display"))
})
$(".yuan1").click(function () {
$(this).closest(".car-list").find(".zly-dui").first().toggle();
var statu = true;
$(".car-list").each(function () {
var dui = $(this).find(".zly-dui").first();
if (dui.css("display") == "none") {
statu = statu & false;
} else {
statu = statu & true;
}
})
$(".quan img").css("display", statu ? "inline" : "none");
})

 

效果图：