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的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
jquery图形密码实现方法
Mar 11 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
layui实现数据分页功能
Jul 27 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
js如何验证密码强度
Mar 18 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 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
第十节--抽象方法和抽象类
2006/11/16 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
vue 运用mock数据的示例代码
2017/11/07 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python实现定时精度可调节的定时器
2018/04/15 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
学习Python爬虫的几点建议
2020/08/05 Python
五种Python转义表示法
2020/11/27 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
基于Python实现天天酷跑功能
2021/01/06 Python
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
自我评价的写作规则
2014/01/06 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
Pandas-DataFrame知识点汇总
2022/03/16 Python