div包裹下购物车加减功能

Question

 
<div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"><span>江苏蓝之蓝旗舰店</span><a href="javascript:;" class="wy-dele"></a></div>
    <div class="weui-panel__bd">
      <div class="weui-media-box_appmsg pd-10">
        <div class="weui-media-box__hd check-w weui-cells_checkbox">
          <label class="weui-check__label" for="cart-pto4">
            <div class="weui-cell__hd cat-check"><input type="checkbox" class="weui-check" name="cartpro" id="cart-pto4"><i class="weui-icon-checked"/></i></div>
          </label>
        </div>
        <div class="weui-media-box__hd"><a href="pro_info.html"><img class="weui-media-box__thumb" src="../upload/pro3.jpg" alt="" /></a></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc"><a href="pro_info.html" class="ord-pro-link">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</a></h1>
          <p class="weui-media-box__desc">规格：<span>红色</span>，<span>23</span></p>
          <div class="clear mg-t-10">
            <div class="wy-pro-pri fl">¥<em class="num font-15">296.00</em></div>
            <div class="pro-amount fr"><div class="Spinner"></div>
<a class="DisDe" href="javascript:void(0)"><i>-</i></a>
                    <input class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:void(0)"><i>+</i></a></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"><span>江苏蓝之蓝旗舰店</span><a href="javascript:;" class="wy-dele"></a></div>
    <div class="weui-panel__bd">
      <div class="weui-media-box_appmsg pd-10">
        <div class="weui-media-box__hd check-w weui-cells_checkbox">
          <label class="weui-check__label" for="cart-pto4">
            <div class="weui-cell__hd cat-check"><input type="checkbox" class="weui-check" name="cartpro" id="cart-pto4"><i class="weui-icon-checked"/></i></div>
          </label>
        </div>
        <div class="weui-media-box__hd"><a href="pro_info.html"><img class="weui-media-box__thumb" src="../upload/pro3.jpg" alt="" /></a></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc"><a href="pro_info.html" class="ord-pro-link">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</a></h1>
          <p class="weui-media-box__desc">规格：<span>红色</span>，<span>23</span></p>
          <div class="clear mg-t-10">
            <div class="wy-pro-pri fl">¥<em class="num font-15">296.00</em></div>
            <div class="pro-amount fr"><div class="Spinner"></div><a class="DisDe" href="javascript:void(0)"><i>-</i></a>
                    <input class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:void(0)"><i>+</i></a></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"><span>江苏蓝之蓝旗舰店</span><a href="javascript:;" class="wy-dele"></a></div>
    <div class="weui-panel__bd">
      <div class="weui-media-box_appmsg pd-10">
        <div class="weui-media-box__hd check-w weui-cells_checkbox">
          <label class="weui-check__label" for="cart-pto4">
            <div class="weui-cell__hd cat-check"><input type="checkbox" class="weui-check" name="cartpro" id="cart-pto4"><i class="weui-icon-checked"/></i></div>
          </label>
        </div>
        <div class="weui-media-box__hd"><a href="pro_info.html"><img class="weui-media-box__thumb" src="../upload/pro3.jpg" alt="" /></a></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc"><a href="pro_info.html" class="ord-pro-link">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</a></h1>
          <p class="weui-media-box__desc">规格：<span>红色</span>，<span>23</span></p>
          <div class="clear mg-t-10">
            <div class="wy-pro-pri fl">¥<em class="num font-15">296.00</em></div>
            <div class="pro-amount fr"><div class="Spinner"></div><a class="DisDe" href="javascript:void(0)"><i>-</i></a>
                    <input class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:void(0)"><i>+</i></a></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
<div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"><span>江苏蓝之蓝旗舰店</span><a href="javascript:;" class="wy-dele"></a></div>
    <div class="weui-panel__bd">
      <div class="weui-media-box_appmsg pd-10">
        <div class="weui-media-box__hd check-w weui-cells_checkbox">
          <label class="weui-check__label" for="cart-pto4">
            <div class="weui-cell__hd cat-check"><input type="checkbox" class="weui-check" name="cartpro" id="cart-pto4"><i class="weui-icon-checked"/></i></div>
          </label>
        </div>
        <div class="weui-media-box__hd"><a href="pro_info.html"><img class="weui-media-box__thumb" src="../upload/pro3.jpg" alt="" /></a></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc"><a href="pro_info.html" class="ord-pro-link">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</a></h1>
          <p class="weui-media-box__desc">规格：<span>红色</span>，<span>23</span></p>
          <div class="clear mg-t-10">
            <div class="wy-pro-pri fl">¥<em class="num font-15">296.00</em></div>
            <div class="pro-amount fr"><div class="Spinner"></div>
<a class="DisDe" href="javascript:void(0)"><i>-</i></a>
                    <input class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:void(0)"><i>+</i></a></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"><span>江苏蓝之蓝旗舰店</span><a href="javascript:;" class="wy-dele"></a></div>
    <div class="weui-panel__bd">
      <div class="weui-media-box_appmsg pd-10">
        <div class="weui-media-box__hd check-w weui-cells_checkbox">
          <label class="weui-check__label" for="cart-pto4">
            <div class="weui-cell__hd cat-check"><input type="checkbox" class="weui-check" name="cartpro" id="cart-pto4"><i class="weui-icon-checked"/></i></div>
          </label>
        </div>
        <div class="weui-media-box__hd"><a href="pro_info.html"><img class="weui-media-box__thumb" src="../upload/pro3.jpg" alt="" /></a></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc"><a href="pro_info.html" class="ord-pro-link">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</a></h1>
          <p class="weui-media-box__desc">规格：<span>红色</span>，<span>23</span></p>
          <div class="clear mg-t-10">
            <div class="wy-pro-pri fl">¥<em class="num font-15">296.00</em></div>
            <div class="pro-amount fr"><div class="Spinner"></div><a class="DisDe" href="javascript:void(0)"><i>-</i></a>
                    <input class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:void(0)"><i>+</i></a></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"><span>江苏蓝之蓝旗舰店</span><a href="javascript:;" class="wy-dele"></a></div>
    <div class="weui-panel__bd">
      <div class="weui-media-box_appmsg pd-10">
        <div class="weui-media-box__hd check-w weui-cells_checkbox">
          <label class="weui-check__label" for="cart-pto4">
            <div class="weui-cell__hd cat-check"><input type="checkbox" class="weui-check" name="cartpro" id="cart-pto4"><i class="weui-icon-checked"/></i></div>
          </label>
        </div>
        <div class="weui-media-box__hd"><a href="pro_info.html"><img class="weui-media-box__thumb" src="../upload/pro3.jpg" alt="" /></a></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc"><a href="pro_info.html" class="ord-pro-link">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</a></h1>
          <p class="weui-media-box__desc">规格：<span>红色</span>，<span>23</span></p>
          <div class="clear mg-t-10">
            <div class="wy-pro-pri fl">¥<em class="num font-15">296.00</em></div>
            <div class="pro-amount fr"><div class="Spinner"></div><a class="DisDe" href="javascript:void(0)"><i>-</i></a>
                    <input class="Amount" value="1" autocomplete="off" maxlength="3"><a class="Increase" href="javascript:void(0)"><i>+</i></a></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
 

这种div包裹的情况下，如何获取是哪个复选框被选中，并获取对应的单价和数量，取消复选框也可以实现，大概就是一个购物车加减的功能

Answer 1

$('.weui-check').click(function(){//单击一个复选框选中或者取消
    var allnum=0;//所有数量之和
    var allprice=0;//所有价格之和    
    $("input[name='cartpro']:checked").each(function () {//循环所有选中的复选框数量相加
        var obj=$(this).parent().parent().parent().parent();
          allnum=allnum+obj.find('.Amount').eq(0).val();
          allprice=allprice+parseInt(obj.find('.num').eq(0).html());
    });
})
$('.allcheck').click(function(){//单击全选或者取消选中
    var allnum=0;//所有数量之和
    var allprice=0;//所有价格之和
    if(this.checked){//单击全选选中
        $(".weui-check").attr("checked", true);
         $(".Amount").each(function () {//循环所有数量相加
            allnum=allnum+$(this).val();
         });
        $(".num").each(function () {//循环所有价格相加
            allprice=allprice+parseInt($(this).html());
         });
    }else{//全部取消选中
        $(".weui-check").attr("checked", false);
    }
})