JS購物車(2)-全選/全不選的勾選框

一、背景和需求

在購物車頁面中，需要為用戶提供商品全選/全不選的功能
每件商品的勾選框是一個 [type=checkbox] 的input
在商品列表的頂部欄還需設置一個“全選”勾選框
當用戶點擊結算時，顯示已勾選商品的總價

二、HTML代碼

全選框

 <div class="t-checkbox">
    <div class="cart-checkbox">
        <input type="checkbox" id="allchecked" onclick="setAll()">
        <label for></label>
 </div>全選</div>

商品勾選框

 <div class="p-checkbox">
        <input type="checkbox" name="p-radio" ><label for></label>
  </div>

底部的結算、總價

<div class="ww">
    <div id="calculate">結算</div>
    <div class="price-sum">
        總價：￥<span class="sum-price"></span>
    </div>
</div>

三、實現思路

1、為全選框綁定onclick事件，改變input的checked屬性

當全選框被點擊時，判斷其當前的勾選狀態
若當前被勾選，則全不選商品
若當前沒有被勾選，則全選商品

注意 在chrome中調試發現
無法通過setAttribute()方法改變checked的取值

2、為“結算”按鈕綁定onclick事件，計算並顯示總價

當“結算”按鈕被點擊時，遍歷商品勾選框數組
將狀態為勾選的商品納入總價

四、相關的JS代碼

//設置全選/全不選的功能
function setAll(){
    //獲取全選框
    var box=document.getElementById('allchecked');
    //獲取商品勾選框
    var radios=document.getElementsByName('p-radio');

    if(box.checked==false)
    {
        for(var i=0;i<radios.length;i++)
        {
            radios[i].checked=false;
        }
    }else{
        for(var i=0;i<radios.length;i++)
        {
            radios[i].checked=true;
        }
    }
}

 //結算功能
 var calculate=document.getElementById('calculate');

 calculate.onclick=function(){
    //獲取商品勾選框
    var radios=document.getElementsByName('p-radio');

    var sumPrice=0;

    //獲取商品“小計”
    var p=document.getElementsByClassName('onlySum');

    for(var m=0;m<radios.length;m++){
        if(radios[m].checked==true)
        {
            sumPrice=sumPrice+parseInt(p[m].innerHTML);
        }
    }

    document.getElementsByClassName("sum-price")[0].innerHTML=sumPrice;
}

完整的源代碼請前往我的github倉庫

五、效果圖