购物车复选功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
*{
margin:0;padding:0;list-style: none;
}
.gwc{
margin: 50px auto;
}
ul{
padding-left:20px;margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="gwc">
<div class="list">
<div><input type="checkbox" class="qx"><span>全选/取消</span></div>
<ul>
<li><input type="checkbox" class="shop"><span>衣服</span><img src="#" alt=""></li>
<li><input type="checkbox" class="shop"><span>衣服</span><img src="#" alt=""></li>
</ul>
</div>
<div class="list">
<div><input type="checkbox" class="qx"><span>全选/取消</span></div>
<ul>
<li><input type="checkbox" class="shop"><span>衣服</span><img src="#" alt=""></li>
<li><input type="checkbox" class="shop"><span>衣服</span><img src="#" alt=""></li>
</ul>
</div>
<div><input type="checkbox" class="qj"><span>全选/取消</span></div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// $('.qj').change(function(){//购物车
// $('input:checkbox').prop('checked',$(this).prop("checked"));
// });
$('.qj').change(function(){
$('input:checkbox').prop('checked',$(this).prop('checked'));
if('input:checkbox').prop('checked',false){
$('.qj').attr('checked',false);
}
});
$('.qx').change(function(){//店铺
var par = $(this).parent('div').next().find('input.shop').prop('checked',$(this).prop("checked"));
var cb = document.getElementsByClassName('qx');
if(!$(this).prop('checked')){
$('.qj').prop('checked',false);
}
for (var i = 0; i < cb.length; i++) {
if (cb[i].checked == true && cb[i + 1].checked == true) {
$('.qj').prop('checked',true);
}
}
});
$('.shop').change(function(){//商品
// console.log('shop:'+$(this).prop('checked'))
var qx = $(this).parents('ul').prev('div').children('input.qx');//找到当前商品的店铺的那个全选
var par = $(this).parents('ul');//商品列表的ul
var cb = $(par).get(0).getElementsByClassName('shop');
if(!$(this).prop('checked')){
$(qx).prop('checked',false);
}
for (var i = 0; i < cb.length; i++) {
if (cb[i].checked == true && cb[i + 1].checked == true) {
$(qx).prop('checked',true);
}
}
});
</script>
</html>
