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 相关文章推荐
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP入门
2006/10/09 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
python实现的希尔排序算法实例
2015/07/01 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
模具设计与制造专业推荐信
2014/02/16 职场文书
企业宣传方案
2014/03/04 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
文艺晚会开场白
2015/05/29 职场文书
同学聚会开幕词
2019/04/02 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS