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仓库

五、效果图