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 相关文章推荐
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php正则表达式学习笔记
2015/11/13 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
linux面试题参考答案(9)
2016/01/29 面试题
高中毕业自我鉴定
2013/12/16 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js