web如何實(shí)現(xiàn)批量購(gòu)買(mǎi)勾選的同時(shí)顯示合計(jì)數(shù)

這篇文章將為大家詳細(xì)講解有關(guān)web如何實(shí)現(xiàn)批量購(gòu)買(mǎi)勾選的同時(shí)顯示合計(jì)數(shù)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在做批量購(gòu)買(mǎi)時(shí)，我們需要點(diǎn)選需要的商品，然后點(diǎn)批量購(gòu)買(mǎi)。

每一次點(diǎn)選，下面立即計(jì)算出合計(jì)的數(shù)量和金額。

主要代碼如下：

1,2圖為 后臺(tái)設(shè)置管理權(quán)限，勾選時(shí)的代碼?？陕赃^(guò)。

<div class="form-group">
   <label class="col-sm-2 control-label"></label>
   <div class="col-sm-10">
   <volist name="list" id="vc">
      <h6 class="text-danger">{$vc['classname']}</h6>
      <volist name="vc['rule']" id="vo">
      <label >
         <input type="checkbox" name="rules[]" value="{$vo.id}" />{$vo.title}
      </label>
      </volist>
   </volist>
   </div>
</div>

$(function(){
   $("#selected").click(function(){
      $("input[name='rules[]']").each(function(){
         $(this).prop('checked', true);
      });
   });
   $("#cancel").click(function(){
      $("input[name='rules[]']").each(function(){
         $(this).prop('checked', false);
      });
   });
});

---

這是批量購(gòu)買(mǎi)。。

<volist name="list" id="vo">
<tr>
   <td >
      {$key+1}
   </td>
   <td>{$vo.username}</td>
   <td>{$vo.price}</td>
   <td>{$vo.num}</td>
   <td>{$vo.addtime|date="Y-m-d H:i:s",###}</td>
   <td>{$vo.pricenum}</td>
   <td>
      <input type="checkbox" name="oid[]" id="oid{$vo.id}" value="{$vo.id}">
   </td>
   <td><a link="{:U('Points/pvbuy',array('id'=>$vo['id']))}" class="action">購(gòu)買(mǎi)</a></td>
</tr>
</volist>

$("#checkall").click(function(){
           $("input[name='oid[]']").each(function(){
               this.checked = true;
           });
      docal();
   });

       $("#checkallno").click(function(){
           $("input[name='oid[]']").each(function(){
               this.checked = false;
           });
           $('#total_pv').html('0');
           $('#total_dg').html('0');

       });

       // 計(jì)算
       function docal(){
           var formData = $('#ajaxForm').serialize();

           // jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
           $.ajax({
               type: 'POST',
               url: "{:U('Points/docal')}",
               data: formData,
               dataType: 'json',
               success: function(re){
                   if(re.code == 1){
                       // 返回總數(shù)量，總金額
                       // layer.alert(re.cal.num);
                       $('#total_pv').html(re.cal.num);
                       $('#total_dg').html(re.cal.usedgcash);
                   }
               },
               error:function(){
                   layer.alert('error');
               }
           });
           return false;

   }

       // 當(dāng)選擇框被點(diǎn)選取時(shí)。
       $("input[id*='oid']").change(function() {
           /*alert($(this).attr("id"));
           alert($(this).val());*/
      docal();
       });

   $(".action").click(function(){
      var buyLink=$(this).attr("link"),$this = $(this);

      layer.confirm('你確定要購(gòu)買(mǎi)嗎？',{title:'操作提示'}, function(index){
         $.post(buyLink,function(data){
            if(data.code == 1){
               layer.alert(data.message, function(){
                  window.location.reload();
               });
            }else{
               layer.alert(data.message);
            }
         });
         layer.close(index);
      });
   });
});

主要是這個(gè) change，找了很久哇。

關(guān)于“web如何實(shí)現(xiàn)批量購(gòu)買(mǎi)勾選的同時(shí)顯示合計(jì)數(shù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。