checkbox全选反选

input[type="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;//恢复所有的子选框选中的默认标记
};

效果：