<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输入框点击加减数值随之变动的更多相关文章

  1. jQuery实现购物车多物品数量的加减+总价计算

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  2. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  3. jQuery实现购物车多物品数量的加减+总价+删除计算

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. Vue(小案例_vue+axios仿手机app)_购物车(二模拟淘宝购物车页面,点击加减做出相应变化)

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

  5. jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...

  6. js与jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  7. 如何用jquery获取input输入框中的值?

    如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? $(&q ...

  8. jquery 修改input输入框的 readOnly属性 && input输入框隐藏

    html的代码 <div class="control-group"> <label class="control-label required&quo ...

  9. jquery实现input输入框实时输入触发事件代码(点击历史记录也会触发)

    $("#email").bind('input propertychange', function() { if(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0 ...

随机推荐

  1. MySQL之主键

    一.主键  primary key (唯一标识 .不能重复.不能为空) 1.主键-----是表中的字段,这个字段能唯一标识一条记录.例如 学生表(学号.姓名,年级)里的学号,不能重复.不能为空: 课程 ...

  2. 使用python的ctypes库实现内存的动态申请和释放

    1.申请前内存占用情况 2.申请内存 from ctypes import * import time #在这里申请1G的内存,单位k mem = create_string_buffer(1024* ...

  3. Codeforces 1236B. Alice and the List of Presents

    传送门 显然每种礼物是互相独立的,一个礼物的分配不会影响另一个礼物 对于某个礼物 $x$ , 对于每个盒子来说,要么选要么不选,那么可以看成长度为 $m$ 的二进制序列 这个序列第 $i$ 位的数就代 ...

  4. supersocket特征

    SuperSocket, 可扩展的 Socket 服务器框架 SuperSocket 是一个轻量级, 跨平台而且可扩展的 .Net/Mono Socket 服务器程序框架.你无须了解如何使用 Sock ...

  5. 怎样使用 v-on 指令?

    1. Vue 中的 v-on 指令用于绑定 dom 事件 的监听函数. 下面代码实现的是 点击更改文字颜色 的功能. <!DOCTYPE html> <html lang=" ...

  6. CAS实现逻辑(JWT)

    由于没有获取正规做CAS的流程,这里根据网上的资料,写了一个自己觉得还可以的方案流程,留着备用 名称介绍: token:用于验证请求是否合法 refreshToken:当token失效后,客户端发送t ...

  7. 初识JavaScript对象

    JavaScript对象语法.类型.属性 属性描述符(getOwnPropertyDescriptor().defineProperty()) [[Get]].[[Put]].Getter.Sette ...

  8. 记录FTPClient超时处理的相关问题(转)

    https://www.cnblogs.com/dasusu/p/10006899.html 记录 FTPClient 超时处理的相关问题   apache 有个开源库:commons-net,这个开 ...

  9. python 实现服务树结构化

    1.  所有服务树数据 tree_list = [{'id': 1, 'pid': 0, 'name': '1211', 'path': '1211', 'leaf': 0, 'type': 0}, ...

  10. python 列表字典按照字典中某个valu属性进行排序

    对用户名进行排序 1. 直接上代码 base_dn_list = [ {', 'tenant': 'HAD', 'role': {'roleID': 'project', 'roleName': '项 ...