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 ...
随机推荐
- redis 发布订阅、geo、bitmap、hyperloglog
1.发布订阅 简介 发布订阅类似于广播功能.redis发布订阅包括 发布者.订阅者.Channel 命令 命令 作用 时间复杂度 subscribe channel 订阅一个频道 O(n) unsub ...
- MHA原理及搭建
MYSQL5.7下搭建MHA 环境说明 在主机1,主机2,主机3上安装MySQL服务端和客户端. 主机1 主机2 主机3 操作系统 CentOS7.4 CentOS7.4 CentOS7.4 主机名 ...
- docker CMD 和 ENTRYPOINT 区别
昨天用Dockerfile来启动mongodb的集群,启动参数--replSet死活没执行,最后就决定研究一哈cmd和entrypoint.但是上网看了一些资料个人觉得讲的不好,还是没有说出根本的东西 ...
- 15-Perl 格式化输出
1.Perl 格式化输出Perl 是一个非常强大的文本数据处理语言.Perl 中可以使用 format 来定义一个模板,然后使用 write 按指定模板输出数据.Perl 格式化定义语法格式如下:fo ...
- 开发工具idea
https://blog.csdn.net/mashuai720/article/details/79389314
- Spring中常用的设计模式之:代理模式
看了tom老师讲的深入分析spring源码,讲的挺好,做个小总结 代理模式的定义: 为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以 ...
- 从零开始搭建react应用
用create-react-app搭建react应用,了解npm run start的工作过程. 第一步:安装脚手架 create-react-app 1. 在node里 npm install cr ...
- day8 socket
代码: 例子1:socket tcp 通讯 server端 import socketserver = socket.socket()ip_port = ("127.0.0.1", ...
- mac-svn代码管理
一.mac下svn管理代码 //1.打开命令行工具,cd 到要拉取的代码放置位置 //2.从svn上拉取项目代码:svn checkout svn项目地址 (--username=XXX --pass ...
- 【转】ESXi主机出现“主机上的系统日志存储在非持久存储器中”解决办法
原址:https://blog.csdn.net/mooncarp/article/details/50923483 当ESXi主机的底层操作系统安装在SD卡上时,在vCenter中配置该主机时,如果 ...