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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
浅谈Vue的computed计算属性
Mar 21 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
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Scrapy框架使用的基本知识
2018/10/21 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
小学毕业感言50字
2014/02/16 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
文案策划求职信
2014/04/14 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
高中生学习计划书
2014/09/15 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
校友会致辞
2015/07/30 职场文书