jquery实现input输入框点击加减数值随之变动
<input class="addBtn min" type="button" value="-" />
<input class="join-money" type="text" value="1">
<input class="addBtn add" type="button" value="+" />
<span class="total">¥<span class="allMoney">10000</span></span>
<p class="money-tip">(每份金额10000元)</p> js:
var t = $(".join-money");
var m = $(".allMoney").text();
var mm = $(".allMoney");
function updateMoney(){
var tt = t.val();
var total = m*tt; //输入框中的份额数与每份金额数相乘得到总金额
mm.text(total);
if(t.val()<=0){
mm.text(m);
}
}
$(function(){
$(".add").click(function() {
t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
updateMoney(); //显示总金额
});
$(".min").click(function(){
t.val(parseInt(t.val())-1); //点击减号输入框数值减1
if(t.val()<=0){
t.val(parseInt(t.val())+1); //最小值为1
}
updateMoney();
});
$(".join-money").keyup(function(){
var c=$(this);
if(/[^\d]/.test(c.val())){//替换非数字字符
var amount=c.val().replace(/[^\d]/g,'');
$(this).val(amount);
}
updateMoney(); //手动输入数值金额随之改变
});
});
jquery实现input输入框点击加减数值随之变动的更多相关文章
- jQuery实现购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- jQuery实现购物车多物品数量的加减+总价+删除计算
<?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- Vue(小案例_vue+axios仿手机app)_购物车(二模拟淘宝购物车页面,点击加减做出相应变化)
一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 ...
- jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...
- js与jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...
- 如何用jquery获取input输入框中的值?
如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? $(&q ...
- jquery 修改input输入框的 readOnly属性 && input输入框隐藏
html的代码 <div class="control-group"> <label class="control-label required&quo ...
- jquery实现input输入框实时输入触发事件代码(点击历史记录也会触发)
$("#email").bind('input propertychange', function() { if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0 ...
随机推荐
- 区间DP(入门)括号匹配
https://www.nitacm.com/problem_show.php?pid=8314 思路:类似于https://blog.csdn.net/MIKASA3/article/details ...
- type(),dir(),getattr(),hasattr(), isinstance()用法
1.type(变量) --->输出变量的类型int.float.str or others: 2.dir() ----> dir() 函数不带参数时,返回当前范围内的变量.方法和定义 ...
- Codeforces 1228E. Another Filling the Grid
传送门 看到 $n=250$ 显然考虑 $n^3$ 的 $dp$ 设 $f[i][j]$ 表示填完前 $i$ 行,目前有 $j$ 列的最小值是 $1$ 的合法方案数 那么对于 $f[i][j]$ ,枚 ...
- C# WebApi日期格式化
WebApi中日期格式化:在WebApiConfig文件中加入如下代码即可,之前遇到的问题,日期中总带有T,现在记录一下解决的方法. 代码: private static void ReturnDat ...
- 【原创】Linux基础之去掉windows中的\r
linux换行为\n,windows换行为\r\n,windows环境编辑的shell脚本在linux下执行会报错: line 2: $'\r': command not found 查看 # cat ...
- 二叉查找树 平衡二叉查找树 红黑树 b树 b+树 链表 跳表 链表
https://www.cnblogs.com/mojxtang/p/10122587.html二叉树的新增遍历查找
- LeetCode:183.从不订购的客户
题目链接:https://leetcode-cn.com/problems/customers-who-never-order/ 题目 某网站包含两个表 Customers 表和 Orders 表.编 ...
- Centos7搭建Docker部署LNMP
1.首先呢先更新yum源 yum update 2.1.安装docker存储库 yum install -y yum-utils \ device-mapper-persistent-data \ l ...
- windows控制台,cmd,命令提示符下的基础操作
打开dos命令窗口1.win+r-->运行-->cmd 2.摁住shift+鼠标右击 选择 在此处打开命令窗口3.在磁盘某文件夹下,选择标题栏中输入框,输入cmd 回车 windows下常 ...
- 【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示
<html> <head> <title>test</title> </head> <body> <div style=& ...