如何使用 Jquery 从另一个文本框和收音机中的值更新“总计”文本框答案

【问题标题】：How to update a 'total' textbox from the values in another textbox and radios with Jquery如何使用 Jquery 从另一个文本框和收音机中的值更新“总计”文本框
【发布时间】：2010-11-22 23:04:57
【问题描述】：

我正在努力让我认为应该是一个简单的 jquery/javascript 工作。我有一个文本框和 2 个收音机，因此我想在用户更改其值时自动更新“总”文本框：

<tr>
  <td>Value:</td>
  <td>
    <input name="value" type="text" id="value" />
  </td>
</tr>

<tr>
  <td>Postage:</td>
  <td>
    <input id="express" type="radio"    name="postageradio" value="PostageExpressRadio" />
    Express post ($3.50)

    <input id="registered" type="radio" name="postageradio" value="PostageRegisteredRadio" />
    Registered post ($5.00)
  </td>
</tr>

<tr>
  <td>Total:</td>
  <td colspan="2">
    <input name="total" type="text" readonly="readonly" id="total" />
  </td>
</tr>

这是我想出的一点 jquery，它在 Chrome 中效果不佳（更新速度很慢），并且在 IE 中根本不适用于收音机。我确信有更好的方法可以做到这一点，因此欢迎提出任何建议。

function calctotal() {
  var value = $('#value').val();
  var amount = parseInt(value.replace(' ', '').replace('$', ''));
  if (isNaN(amount)) amount = 0;
  var post = 0;
  if ($('#express').is(':checked')) post = 3.5;
  if ($('#registered').is(':checked')) post = 5.0;
  $('#total').val('$' + (amount + post).toFixed(2));
}

// The timeout is used because otherwise the 'change' events get the previous value (???)
function calctotalsoon() {
  setTimeout(function() {
    calctotal();
  }, 100);
}

$(document).ready(function() {
  $('#value').keyup(function(event) {
    calctotalsoon();
  } );

  $('#express').change(function(event) {
    calctotalsoon();
  } );

  $('#registered').change(function(event) {
    calctotalsoon();
  } );
} );

非常感谢

【问题讨论】：

对我来说似乎在 Chrome 和 IE8 中运行良好。你用的是什么版本的jQuery？
找到了更多关于收音机为什么不能在 IE 中触发的细节：norman.walsh.name/2009/03/24/jQueryIE
是的，看起来您可能想要添加一个 .click 方法来处理 IE“功能”。
哇，我以为 jquery 已经为你解决了所有跨浏览器的问题？
另外，我希望它在他们在“值”框中键入每个字符时更新，而不是等到它失去焦点。我需要哪一个 keydown/up/press？

标签： javascript asp.net jquery html

【解决方案1】：

这是我选择简化它的方式，其他人可能有更好的建议。从概念上讲，您所做的几乎所有事情都很好。

首先，单选按钮的“值”属性现在反映了应添加的适当邮资金额。

<input id="express" type="radio"    name="postageradio" value="3.50" />
<input id="registered" type="radio" name="postageradio" value="5.00" />

然后我像这样简化了javascript：

function calctotal() {
  var value = $('#value').val();
  var amount = parseFloat(value) || 0;
  var post = parseFloat($("input[name=postageradio]:checked").val()) || 0;

  $('#total').val('$' + (amount + post).toFixed(2));
}

$(document).ready(function() {
  $('#value').keyup(function(event) {
    calctotal();
  } );

  $('#express, #registered').bind('click change', function(event) {
    calctotal();
  } );
} );

我在 IE8、FF 和 Chrome 中对其进行了测试。您不需要使用 setTimeout。现在，邮资值是根据所选单选按钮的值计算的，而不是硬编码该值。为了 IE，收音机必须同时点击和更改

在这里提琴：http://www.jsfiddle.net/NzrBj/

【讨论】：

我发现我需要在 IE 中捕捉“点击”事件才能让收音机工作
我明白了。我还注意到的一件事是（您也可以在小提琴中观察到这一点）jQuery 1.3.2 无法正常工作（它存在您在原始帖子中遇到的问题），因此请确保您最好使用 jQuery 1.4+结果:)
@Amleonard : 你能为此提供解决方案吗stackoverflow.com/questions/7736434/…

【解决方案2】：

要解决 IE 问题，您可以将处理程序添加到您的文档中。这意味着您会获得比您想要的更多的事件，但它不应该是大量的：

$(document).ready(function() {
      $(document).keyup(function(event) {
        calctotalsoon();
      } );

      $(document).click(function(event) {
        calctotalsoon();
      } );
} );

【讨论】：