Question

我的页面上有2个文本框和一个标签。 2个文本框将包含数字值。标签文本将是2个文本框值的乘积。有没有办法使用JQuery执行此操作，以便在编辑文本框时可以更新值，而无需进行回发？

此外，文本框中可能包含带逗号的值：例如10,000。有没有办法可以从中提取数字，以便它可以用来计算标签值。

提前致谢，

的ZAP

Answer 1

我无法在其他答案中添加评论，所以我只是在这里发布更新。

最初的问题涉及产品，这意味着乘法，所以这里的版本允许无限制的文本框并完成乘法。


function makeInt(text) {
  return parseInt(text.replace(',', ''));
}
$(function(){
  //hook all textboxes (could also filter by css class, if desired)
  //this function will be called whenever one of the textboxes changes
  //you could change this to listen for a button click, etc.
  $("input[type=text]").change(function(){
    var product = 1;
    //loop across all the textboxes, multiplying along the way
    $("input[type=text]").each(function() {
      product *= makeInt($(this).val());
    });
    $("#display-control-id").html(product);
  });
});

Answer 2

$('#SecondTextbox').keyup(function() {
   var t1 = $('#FirstTexbox').val();
   var t2 = $(this).val();
   var result = t1+t2;
   $('#resultLabel').html(result);
});

这可以解决问题，或者你可以在带有一些链接元素的点击事件上使用它。这也没有任何页面刷新。

$('#checkButton').click(function() {
   var t1 = $('#FirstTexbox').val();
   var t2 = $('#SecondTextbox').val();
   var result = t1+t2;
   $('#resultLabel').html(result);
});

链接可能是，

<a id="checkButton" title="Check your result">Check</a>

然后你将拥有'cursor：pointer;'的css设置。使它看起来是一个合适的链接。

JQuery更新标签

2 个答案: