checkbox全选反选;
点击子选框,全选不选中;
子选框全选中,全选选中。
页面结构:
<!-- 购物列表 -->
<div class="shoppingList">
<ul>
<li>
<a href="javascript:;" class="clearAfter">
<label class="shoppingListLi_R"><input class="check1" type="checkbox" name="" value="" checked="checked" onclick="selectPa();"></label>
<div class="shopListR">
<div class="shopPrice">
<span class="shopPriceNow">¥1990.00</span>
<span class="shopPriceOld">¥2899.00</span>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:;" class="clearAfter">
<label class="shoppingListLi_R"><input class="check1" type="checkbox" name="" value="" checked="checked" onclick="selectPa();"></label>
<div class="shopListR">
<div class="shopPrice">
<span class="shopPriceNow">¥1990.00</span>
<span class="shopPriceOld">¥2899.00</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="shopPay clearAfter">
<div class="shopPayL shoppingListLi_R">
<input type="checkbox" name="" id="checkall" checked="checked">
<span class="shopPayChoose">全选</span>
<span class="shopPayTotal">合计:<i>¥1990.00</i></span>
</div>
</div>
页面样式:
.clearAfter:after{
content:'';
display: block;
clear: both;
}
.shoppingList ul li a label{
float: left;
width: 6%;
}
.shoppingList ul li a label input{
display: block;
width: 100%;
height: 32px;
opacity:0.5;
}
.shoppingList ul li a label.shoppingListLi_R{
background: url(img/8.jpg)no-repeat 0.2% 50%;
background-size:32px 33px;
}
.shoppingList ul li a label.shoppingListLi{
background: url(img/7.jpg)no-repeat 0% 50%;
background-size:36px 36px;
}
.shopListR .shopPrice .shopPriceNow{
font-size: 28px;
color:#F85A40;
padding: 0 20px 0 0;
}
.shopListR .shopPrice .shopPriceOld{
font-size: 28px;
color:#999999;
text-decoration: line-through;
}
.shopPay{
width: 720px;
border-top: 1px solid #DFDFDD;
position: fixed;
left: 0;
bottom: 0;
}
.shopPay .shopPayL{
float: left;
width: 64.4%;
height: 105px;
line-height: 105px;
padding-left: 35px;
}
.shopPay .shopPayL input{
width: 36px;
height: 36px;
opacity:0.5;
}
.shopPay .shopPayL.shoppingListLi_R{
background: url(img/8.jpg)no-repeat 6% 50%;
background-size:32px 33px;
}
.shopPay .shopPayL.shoppingListLi{
background: url(img/7.jpg)no-repeat 5.6% 50%;
background-size:36px 36px;
}
.shopPayL .shopPayChoose{
font-size: 32px;
color:#333333;
padding: 0 28px 0 0px;
}
.shopPayL .shopPayTotal{
font-size: 32px;
color:#333333;
}
.shopPayL .shopPayTotal i{
font-size: 32px;
color:#F56040;
}
逻辑层:
// 购物车
// 选高亮
$(".shoppingList ul li a label").click(function() {
if($(this).attr('class')=='shoppingListLi_R'){
$(this).removeClass('shoppingListLi_R').addClass('shoppingListLi');
}else{
$(this).removeClass('shoppingListLi').addClass('shoppingListLi_R');
}
});
//父选框的全选和取消全选
var ischeck=false;//全选标记
$("#checkall").click(function(){
if (ischeck) {
$(".check1").prop("checked",!ischeck);
$('.shopPay .shopPayL').removeClass('shoppingListLi_R').addClass('shoppingListLi');
$(".shoppingList ul li a label").addClass('shoppingListLi').removeClass('shoppingListLi_R');
ischeck=!ischeck;
}else{
$(".check1").prop("checked",!ischeck);
$('.shopPay .shopPayL').removeClass('shoppingListLi').addClass('shoppingListLi_R');
$(".shoppingList ul li a label").removeClass('shoppingListLi').addClass('shoppingListLi_R');
ischeck=!ischeck;
}
})
//子选框全部选中,父选框选中;子选框不全选中,父选框不选中
var isallcheck=true;//所有的子选框选中的标记
function selectPa(){
$(".check1").each(function(i,o){
if(!$(o).prop("checked")){
isallcheck=false;
return;
}
});
if(isallcheck){
ischeck=true;
$("#checkall").prop("checked",isallcheck);
$(".shopPay .shopPayL").removeClass('shoppingListLi').addClass('shoppingListLi_R');
}else{
ischeck=false;
$("#checkall").prop("checked",isallcheck);
$(".shopPay .shopPayL").addClass('shoppingListLi').removeClass('shoppingListLi_R');
}
isallcheck=true;//恢复所有的子选框选中的默认标记
};
效果: