Question

我正在努力获得我认为应该是一个简单的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();
  } );
} );

非常感谢

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

Answer 2

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

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

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

如何使用Jquery从另一个文本框和无线电中的值更新“总计”文本框

2 个答案: