jq实现点击增加或者减少商品数量并且自动计算总价格

2018-10-29

本文将为点击增加或者减少商品数量并且自动计算总价格相关教程，具体实例代码请看下文:

点击增加或者减少商品数量并且自动计算总价格:
本章节介绍一下如何实现点击按钮来添加或者删除商品的数量，并且能够自动计算商品的总价格。代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.zhimengzhe.com/" /> 
<title>织梦者</title> 
<style type="text/css">
span{
  color:red;
  cursor:pointer;
}
</style>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">      
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#quantity").keyup(function(){
    if(isNaN($(this).val())||parseInt($(this).val())<1){
      $(this).val("1");
      $("#totalPrice").html($("#price").val());
      return;
    }
    var total=parseFloat($("#price").val())*parseInt($(this).val());
    $("#totalPrice").html(total.toFixed(2));
  })
    
  $("#add").click(function(){
    numAdd();
  });
    
  $("#del").click(function(){
    numDec();
  });
})
/*商品数量+1*/
function numAdd(){
  var num_add = parseInt($("#quantity").val())+1;
  if($("#quantity").val()==""){
    num_add = 1;
  }
  $("#quantity").val(num_add);
  var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
  $("#totalPrice").html(total.toFixed(2));
}
/*商品数量-1*/
function numDec(){
  var num_dec = parseInt($("#quantity").val())-1;
  if(num_dec<1){
    //购买数量必须大于或等于1
    alert("not lt 1");
  }
  else{
    $("#quantity").val(num_dec);
    var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
    $("#totalPrice").html(total.toFixed(2));
  }
}
</script>
</head>
<body>
<p>
<label for="name" >单价：</label>   
<input  style="width:20%" value="28" id="price" />
    <br>
<label for="name" >数量：</label>
    <button type="button" id="del" class="btn btn-primary">-</button>
  <input type="text" value="1"  style="width:20%" id="quantity" /> 
  <button type="button" id="add" class="btn btn-primary">+</button>
</p>
总价格:<span id="totalPrice">28</span>

</body>
</html>

微信扫描下方的二维码阅读本文

阅读剩余

版权声明：
标题：jq实现点击增加或者减少商品数量并且自动计算总价格
作者：admin
链接：https://www.kmtky.com/293.html
文章版权归作者所有，未经允许请勿转载。
声明：仅供内部测试和技术交流使用，任何非法商业使用及商业利益冲突带来的法律纠纷，与本人无关，本人概不负责，请下载后24小时内删除，谢谢合作！如有侵权请于作者联系，尽快删除。

THE END