正文
jquery加减,jquery加减法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用jquery实现对选中内容的值实行加减操作
给你写好了，很简单，你预览的时候记得引用自己的jQuery文件。
对了，你的table结构有问题，给你稍做了改动。希望对你有用，呵呵
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
style type="text/css"
.changeBG{
background-color:#09F;}
input{
background-color:#E6EFF0;}
.quick span{
display:block;
float:left;
cursor:pointer;
padding:3px;}
label{
cursor:pointer;}
/style
script src="../scripts/jquery-1.4.js" type="text/javascript"/script
script type="text/javascript"
var A=[1,3,9]; //选项A的列表
var B=[2,4,6]; //选项B的列表
$(function(){
$('.quick:contains("A")').click(function(){
change('input',A);});
$('.quick:contains("B")').click(function(){
change('input',B);});
$('.quick:contains("反选")').click(function(){
turnOver();});
$('.quick:contains("取消")').click(function(){
abolish();});
$('.quick span:contains("-")').click(function(){
decrease(10);});
$('.quick span:contains("+")').click(function(){
increase(10);});
$('label').parent().click(function(){
$(this).next().children().toggleClass('changeBG')});
});
function change(str,arr){
for(i=0;iarr.length;i++)
$($(str).get(arr[i]-1)).addClass('changeBG');}
function abolish(){
$('input').removeClass('changeBG');}
function turnOver(){
$('input').toggleClass('changeBG');}
function increase(num){
var a=$('.changeBG');
for(i=0;ia.length;i++)
$(a[i]).val($(a[i]).val()*1+num);}
function decrease(num){
var a=$('.changeBG');
for(i=0;ia.length;i++)
$(a[i]).val($(a[i]).val()*1-num);}
/script
title无标题文档/title
/head
body
table border="0" align="center" cellpadding="0" cellspacing="0"
tr
td align="left"
table
tr
td class="quick"a href="#"FONT color=redA/FONT/a/td
td class="quick"a href="#"FONT color=blueB/FONT/a/td
td class="quick"a href="#"反选/a/td
td class="quick"a href="#"取消/a/td
/tr
/table
/td
/tr
tr
td align="left"
table cellpadding="0" cellspacing="1" border="0"
tr
th序号/th
th值/th
th序号/th
th值/th
th序号/th
th值/th
th序号/th
th值/th
th序号/th
th值/th
/tr
tr
td align="right"label1/label/td
tdinput type="text" name="num[]" value="100" size="12"//td
td align="right"label2/label/td
tdinput type="text" name="num[]" value="110" size="12"//td
td align="right"label3/label/td
tdinput type="text" name="num[]" value="120" size="12"//td
td align="right"label4/label/td
tdinput type="text" name="num[]" value="130" size="12"//td
td align="right"label5/label/td
tdinput type="text" name="num[]" value="140" size="12"//td
/tr
tr
td align="right"label6/label/td
tdinput type="text" name="num[]" value="200" size="12"//td
td align="right"label7/label/td
tdinput type="text" name="num[]" value="210" size="12"//td
td align="right"label8/label/td
tdinput type="text" name="num[]" value="220" size="12"//td
td align="right"label9/label/td
tdinput type="text" name="num[]" value="230" size="12"//td
td align="right"label10/label/td
tdinput type="text" name="num[]" value="240" size="12"//td
/tr
/table
/td
/tr
tr
td align="left" class="quick"
span-/span
span10/span
span+/span
/td
/tr
/table
/body
/html
相关问答
Q1: jQuery实现数字加减效果汇总
我们在网上购物提交订单时，在网页上一般会有一个选择数量的控件，要求买家选择购买商品的件数，开发者会把该控件做成可以通过点击实现加减等微调操作，当然也可以直接输入数字件数。
左右加减数字
像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实现左右加减数字，调用方法非常简单。
复制代码
代码如下:
input
type="text"
class="spinner"/
调用也非常简单，先载入jquery库文件和jquery.spinner.js，然后使用以下代码：
复制代码
代码如下:
$('.spinner').spinner();
Bootstrap风格，右侧加减
Bootstrap火了很久了，基于bootstrap风格的各类应用也非常多，下面给大家介绍一个基于bootstrap的数字加减插件，可以设置最小值、最大值、递增递减（步长值），可手动输入数字。
复制代码
代码如下:
div
class="input-group
spinner"
data-trigger="spinner"
id="spinner"
input
type="text"
class="form-control"
value="1"
data-max="10"
data-min="1"
data-step="1"
div
class="input-group-addon"
a
href="javascript：;"
class="spin-up"
data-spin="up"i
class="icon-sort-up"/i/a
a
href="javascript：;"
class="spin-down"
data-spin="down"i
class="icon-sort-down"/i/a
/div
/div
将bootstrap相关css和js文件载入后，便可直接看到页面效果，如果你的项目基于bootstrap，那么直接就可以调用它了。
您还可以参考该项目地址：查看相关参数设置。
jQuery
ui风格，右侧加减
jQuery
ui也提供了数字加减插件，可以设置最小值、最大值、递增递减（步长值），可手动输入数字。
复制代码
代码如下:
input
type="text"
id="spinner"/
如果你的项目使用了jquery
ui，那就可以调用jquery
ui来实现数字加减的功能了。
复制代码
代码如下:
$("#spinner").spinner({
max:10,
min:0,
step:2
});
以上几种就是本人在项目中使用的关于jQuery实现数字加减的方法，整理出来分享给大家用，虽然功能比较简单，但是很实用。
Q2: jquery实现了点击事件，点击加减按钮然后总价动态改变，怎么让输入框直接输入的内容也能让总价改变
用oninput事件，在用户输入时触发。
例如：
html:
input type="text" id="qty_item_1" oninput="change_total()"
js:
function change_total() {
var z = $("#qty_item_1").val();
var zz = z*1999;
$("#total_item_1").text(zz);
}
Q3: jquery 如何即时加减计算
jquery部分
function testAdd(){
var aa=$("#aa");
var bb=$("#bb");
a=parseInt(aa.val());
b=parseInt(bb.val());
b=b+a;
bb.val(b);
bb.innerHTML=bb.value;
}
function testSub(){
var aa=$("#aa");
var bb=$("#bb");
a=parseInt(aa.val());
b=parseInt(bb.val());
b=b-a;
bb.value=b;
bb.innerHTML=bb.value;
}
html部分
body
input type="button" name="add" value="add" onclick="testAdd()"
input type="text" id="aa"
input type="button" name="sub" value="sub" onclick="testSub()"
br/
购物车
input type="text" value="100" id="bb"
/body
Q4: jquery怎么实现点击加减按钮调整数量的同时动态的改变显示的总价?
拿到input的值 当点击+ 索引++就好了 后面的同理 拿到索引*2你的价格就OK了
