使用jQuery增加输入字段值

Increment input field value with jQuery

本文关键字：字段 输入 增加 jQuery 使用      更新时间：2023-11-06

在jQuery（或纯JavaScript）中，增加输入字段值的最短方式是什么？

例如

<input id="counter" type="hidden" name="counter" value="1">

所以它变为

<input id="counter" type="hidden" name="counter" value="2">

$('#counter').val( function(i, oldval) {
    return parseInt( oldval, 10) + 1;
});

演示

或

$('#counter').val( function(i, oldval) {
    return ++oldval;
});

演示

您可以将上面的任何一个代码封装在一个函数中，并调用该函数进行进一步的增量。例如：

function increment() {
    $('#counter').val( function(i, oldval) {
        return ++oldval;
    });
}

现在，在需要的时间和地点拨打increment()。

我认为最短的方法是：

$('#counter').get(0).value++

或

$('#counter').get(0).value--

试试这个：

var $input = $('#counter');
$input.val( +$input.val() + 1 );​

演示

这里不需要jQuery，而是使用纯JavaScript:

document.getElementById('counter').value++;

演示：http://jsfiddle.net/RDMPq/

您可以将增量移动到一个接受动态ID以提高可移植性的函数：

function incrementInput(id){
    document.getElementById(id).value++;
}

演示：http://jsfiddle.net/uyuGY/

你可以试试这个：

jQuery:

设置一个功能来完成此操作：

function incrementVal(selector) {
var $item = selector;
var $curVal = $item.attr("value");
$item.attr("value", parseInt($curVal) + 1 );
}

点击按钮即可使用：

$("#increment").on("click",function() {
incrementVal($('#counter'));
});

您的HTML：

<input id="counter" type="hidden" name="counter" value="1">
<button id="increment">Increment field</button>

希望能有所帮助。

相关文章：