代码之家 › 专栏 › 技术社区 › Chris

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

html jquery asp.net javascript

Chris · 技术社区 · 15 年前

我正在努力让我认为应该是简单的jquery/javascript工作起来。我有一个文本框和两个类似的收音机,因此当用户更改其值时,我希望自动更新“总计”文本框:

<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();
  } );
} );

非常感谢

2 回复 | 直到 15 年前

aaronofleonard 15 年前

以下是我如何选择精简它,其他人可能会有更好的建议。从概念上讲,你所做的一切都是好的。

首先,单选按钮的“value”属性现在反映了应该添加的适当邮资量。

<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/

Jeff B 15 年前

要解决IE问题,可以将处理程序添加到文档中。这意味着你得到的事件比你想要的多,但不应该是太多:

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

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