Question

我还在使用输入，广播和下拉列表来处理自动总表单。输入和下拉列表工作得很好。但收音机不是应该的。即使没有选择，表格也是无线电值的总和。我只需要在单击无线电时自动求和表单。这是我的代码。

＆＃13;

jQuery(document).ready(function ($) {
  var $total = $('#total'),
    $value = $('.value');
  $value.on('input input[type=radio]:checked', function (e) {
    var total = 0;
    $value.each(function (index, elem) {
      if (!Number.isNaN(parseInt(this.value, 10)))
        total = total + parseInt(this.value, 10);
    });
    $total.val(total);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" size="5" id="value1" name="value1" class="value" />Value 1
<br />
<input type="radio" id="value5" name="value2" class="value" value="5"/><label for="value5">+ 5</label>
<br />
<input type="radio" id="value10" name="value2" class="value" value="10"/>
<label for="value10">+ 10</label>
<br />
Value 4
<select name="value4" id="value4" class="value">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>
<hr />
Total
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

＆＃13;

Demo jsfiddle

Answer 1

您可以检查当前项目是否为收音机并确保使用is()进行检查，否则您可以跳过return的当前迭代，如下所示：

jQuery(document).ready(function ($) {
  var $value = $('.value');
  $value.on('input', function (e) {
    var total = 0;
    $value.each(function (index, elem) {
        if ($(elem).is("input[type='radio']") && (!$(elem).is(":checked")))
           return;
        if (!Number.isNaN(parseInt(this.value, 10)))
           total = total + parseInt(this.value, 10);
    });
    $('#total').val(total);
  });
});

Updated Fiddle

更新了Fiddle

Answer 2

只有像'keyup keypress blur change input'这样的事件才能传递给on函数。您应该处理文本框和dropdrop的更改事件，并处理单击事件以获取复选框。

$('.value').on('change click', handleEvent);

您不应该遍历所有具有类.value的元素，因为它包含未选中的复选框。

function handleEvent() {
    $('.value').each(function(i, ele){
        if ($(ele).is("input[type='radio']") && (!$(ele).is(":checked"))) {
            return;
        }
        if (!Number.isNaN(parseInt(ele.value))) {
           total += parseInt(ele.value);
       }
    }
}

如何使用选定的无线电更新总数

2 个答案: