jquery实现文本框数量加减功能的例子分享


Posted in Javascript onMay 10, 2014

下面是使用jquery实现的代码。

效果图:

jquery实现文本框数量加减功能的例子分享

源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js数量加减</title>
<script type="text/javascript" src="https://3water.com/Public/js/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));
 })})

/*商品数量+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>Quantity: <span onclick="numDec()">-</span> <input type="text" id="quantity" /> <span onclick="numAdd()">+</span></p>
  <p class="sdsd">Total Price: <span id="totalPrice">28.10</span></p>
  <input type="hidden" value="28.1" id="price" /><!--单价-->
</body>
</html>
Javascript 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 #Javascript
多引号嵌套的变量命名的问题
May 09 #Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 #Javascript
javascript的数组和常用函数详解
May 09 #Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 #Javascript
实例讲解JS中数组Array的操作方法
May 09 #Javascript
一个JavaScript的求爱小特效
May 09 #Javascript
You might like
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
php获取域名的google收录示例
2014/03/24 PHP
document.all与WEB标准
2020/05/13 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python与php实现分割文件代码
2017/03/06 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
大学应届毕业生个人求职信
2013/09/23 职场文书
建筑学专业自荐书
2014/07/09 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
统计员岗位职责
2015/02/11 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
学校教师培训工作总结
2015/10/14 职场文书