如何使用JavaScript實(shí)現(xiàn)簡(jiǎn)單購(gòu)物小表格

小編給大家分享一下如何使用JavaScript實(shí)現(xiàn)簡(jiǎn)單購(gòu)物小表格，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體內(nèi)容如下

html代碼：

<table border="" cellspacing="0" cellpadding="1">
   <tr >
    <td><input type="checkbox"class="all"/></td>
    <td >商品</td>
    <td >價(jià)錢</td>
   </tr>
   <tr class="zuida">
    <td><input type="checkbox" class="lla"/></td>
    <td>蘋果</td>
    <td  class="zongji">8000</td>
   </tr>
   <tr  class="zuida">
    <td><input type="checkbox" class="lla"/></td>
    <td>香蕉</td>
    <td  class="zongji">5000</td>
   </tr>
   <tr  class="zuida">
    <td><input type="checkbox" class="lla"/></td>
    <td>梨子</td>
    <td  class="zongji">2000</td>
   </tr>
   <tr  class="zuida">
    <td><input type="checkbox" class="lla"/></td>
    <td>蔬菜</td>
    <td  class="zongji">2000</td>
   </tr>
   <tr>
    <td colspan="3">總價(jià)是：<span class="zongjia">0</span>元</td>
   </tr>
</table>

JQ代碼：

<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
     $(".all").change(function(){
      var value=$(this).prop("checked")
      $(".lla").prop("checked",value)
      zongjia()
     })
     $(".lla").click(function(){
      var chang1=$(".lla").length;
      var chang2=$(".lla:checked").length;
      if(chang1===chang2){
       $(".all").prop("checked",true)
      }else{
       $(".all").prop("checked",false)
      }
      zongjia()
     })
     $(".lla").change(function(){
      zongjia()
     })
     function zongjia(){
      var xuan=$(".lla:checked").parents(".zuida");
      var num=0;
      xuan.each(function(index,rom){
       var xuanzhi=$(rom).find(".zongji").text()*1;
       num+=xuanzhi;
      })
      $(".zongjia").text(num);
     }
    })
</script>

成品圖：

以上是“如何使用JavaScript實(shí)現(xiàn)簡(jiǎn)單購(gòu)物小表格”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！