单选框仅在更改时添加值，但不减去答案

【问题标题】：radioboxes only adds values on change, but doesn't subtract单选框仅在更改时添加值，但不减去
【发布时间】：2017-01-06 09:04:29
【问题描述】：

我有两个功能。一个从checkboxes 添加值，另一个从radioboxes 添加值到var tot。

问题是radiobox 只对var tot 增加值，但在未选中时不会减去。
在我确定var tot 的范围之前，我没有遇到这个问题，但必须这样做，以便两个函数都可以访问它。这是一个解决问题的代码示例：

$(':checkbox:checked').prop('checked', false);
$('input[type="radio"]:checked').prop('checked', false);

$(document).ready(function() {
  var tot = 0;
  $('#usertotal').text('0 SEK')

  $('input:checkbox').change(function() {
    if (!$(this).is(':checked')) {
      tot -= parseInt($(this).val());
    } else {
      tot += parseInt($(this).val());
    }
    $('#usertotal').text(tot + ' SEK')
  });

  $('input[type="radio"]').change(function() {
    if ($(this).is(':checked')) {
      tot += parseInt($(this).val());
    } else if (!$(this).is(':checked')) {
      tot -= parseInt($(this).val());
    }
    $('#usertotal').text(tot + ' SEK')
  });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<input type="radio" name="radioName" value="160 Yes">till 20
<input type="radio" name="radioName" class="someclass" value="5 Yes"> 20
<input type="checkbox" name="" value="29 Yes">BV

<div class="col-lg-4 col-mg-3 col-sm-12 col-xs-12 calculation-window">
  Totalt: <span id="usertotal"></span>
</div>

jsfiddle：https://jsfiddle.net/ys1b9Lwv/12/

【问题讨论】：

这已在另一个问题中讨论过。 The radio button "change" event only fires when activated, not when deactivated.您可能会发现在每个 onchange 事件中从头开始重复计算会更容易。

标签： javascript jquery

【解决方案1】：

问题似乎是单选按钮在未选中时不会触发更改事件。将日志记录添加到无线电更改事件中可以确认这一点。

有几种方法可以解决这个问题，但我认为最优雅的方法是将总计的计算重构为一个单独的函数，该函数检查总和/总计中涉及的所有组件的值。

我想出了this solution:

var tot = 0;
$('#usertotal').text('0 SEK');

var update_tot = function () {
  tot = 0; // reset

  // sum of inputs that are checked
  $('input:checkbox,input[type="radio"]').each(function(){
    if ($(this).is(':checked'))
      tot += parseInt($(this).val());
  });

  $('#usertotal').text(tot + ' SEK');
};

$('input:checkbox,input[type="radio"]').change(update_tot);

更简洁的重写可能是：

var tot = 0;
$('#usertotal').text('0 SEK');

$('input:checkbox,input[type="radio"]').change(function () {
  tot = 0; // reset

  // sum of inputs that are checked
  $('input:checkbox,input[type="radio"]')
    .filter(':checked')
    .each(function(){
      tot += parseInt($(this).val());
    });

  $('#usertotal').text(tot + ' SEK');
});

【讨论】：

【解决方案2】：

我们无法在单选框中取消选择。所以我的解决方案是自己取消选择并识别已经选择的单选框。我正在使用类来实现它。

$('input[type="radio"]').change(function() {

        tot += parseInt($(this).val());
   $(this).addClass("sel");
  $('input[name="' + $(this).attr('name') + '"]').not($(this)).trigger('deselect'); 
    $('#usertotal').text(tot + ' SEK')
  });
   $('input[type="radio"]').bind('deselect', function(){
    if($(this).hasClass("sel"))
    {
    $(this).removeClass("sel");
      tot -= parseInt($(this).val());
       $('#usertotal').text(tot + ' SEK')
    }});

【讨论】：