如何使用Javascript或jQuery求和和减去每个无线电值的总和

Question

我有一个多个无线电元素，选项是整数。对于每台收音机，我都会得到默认的选项来总结总数。

然后，在change事件上，我想根据所选选项对总数进行求和或减去。

在javascript中，我能够得到总数，但不知道如何在变化中求和和减去值。下面是我当前的标记和脚本：-

​

var sum = 0;
var $this;

$('.form-item input').each(function() {
  $this = $(this);

  if ($this[0].checked == true) {
    sum += parseInt($this.val());
  }
});

$('.form-item input').on('change', function() {
  // addition and subtraction here
});

$('.total').html(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-type-radio">
  <strong>Question 1</strong>
  <div class="form-item">
    <input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
    <label class="option" for="radio-1">1</label>
  </div>
  
  <div class="form-item">
    <input type="radio" id="radio-2" name="" value="2" class="form-radio">
    <label class="option" for="radio-2">2</label>
  </div>
  
  <div class="form-item">
    <input type="radio" id="radio-3" name="" value="3" class="form-radio">
    <label class="option" for="radio-3">3</label>
  </div>
</div>

<div class="form-type-radio">
  <strong>Question 2</strong>
  <div class="form-item">
    <input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
    <label class="option" for="radio-1">1</label>
  </div>
  
  <div class="form-item">
    <input type="radio" id="radio-2" name="" value="2" class="form-radio">
    <label class="option" for="radio-2">2</label>
  </div>
  
  <div class="form-item">
    <input type="radio" id="radio-3" name="" value="3" class="form-radio">
    <label class="option" for="radio-3">3</label>
  </div>
</div>

<div class="form-type-radio">
  <strong>Question 3</strong>
  <div class="form-item">
    <input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
    <label class="option" for="radio-1">1</label>
  </div>
  
  <div class="form-item">
    <input type="radio" id="radio-2" name="" value="2" class="form-radio">
    <label class="option" for="radio-2">2</label>
  </div>
  
  <div class="form-item">
    <input type="radio" id="radio-3" name="" value="3" class="form-radio">
    <label class="option" for="radio-3">3</label>
  </div>
</div>
<div class="total"><strong>Total:</strong><span>3</span></div>

​

Answer 1

1. 只需调用单选按钮的更改事件中的添加即可。
2. 初始化“内部更改”事件的总数，以便每次选择和取消选择时都可以进行更改。

注意:为每组单选按钮添加名称，以便您可以取消选择和设置总跨度。

​

$('.form-item input').on('change', function() {
  // addition and subtraction here
  var $this;
  var sum = 0;
  $('.form-item input').each(function() {
    $this = $(this);

    if ($this[0].checked == true) {
      sum += parseInt($this.val());
    }

    $('.total span').html(sum);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-type-radio">
  <strong>Question 1</strong>
  <div class="form-item">
    <input type="radio" id="radio-1" name="samename" value="1" class="form-radio" checked="checked">
    <label class="option" for="radio-1">1</label>
  </div>

  <div class="form-item">
    <input type="radio" id="radio-2" name="samename" value="2" class="form-radio">
    <label class="option" for="radio-2">2</label>
  </div>

  <div class="form-item">
    <input type="radio" id="radio-3" name="samename" value="3" class="form-radio">
    <label class="option" for="radio-3">3</label>
  </div>
</div>

<div class="form-type-radio">
  <strong>Question 2</strong>
  <div class="form-item">
    <input type="radio" id="radio-1" name="samename1" value="1" class="form-radio" checked="checked">
    <label class="option" for="radio-1">1</label>
  </div>

  <div class="form-item">
    <input type="radio" id="radio-2" name="samename1" value="2" class="form-radio">
    <label class="option" for="radio-2">2</label>
  </div>

  <div class="form-item">
    <input type="radio" id="radio-3" name="samename1" value="3" class="form-radio">
    <label class="option" for="radio-3">3</label>
  </div>
</div>

<div class="form-type-radio">
  <strong>Question 3</strong>
  <div class="form-item">
    <input type="radio" id="radio-1" name="samename2" value="1" class="form-radio" checked="checked">
    <label class="option" for="radio-1">1</label>
  </div>

  <div class="form-item">
    <input type="radio" id="radio-2" name="samename2" value="2" class="form-radio">
    <label class="option" for="radio-2">2</label>
  </div>

  <div class="form-item">
    <input type="radio" id="radio-3" name="samename2" value="3" class="form-radio">
    <label class="option" for="radio-3">3</label>
  </div>
</div>
<div class="total"><strong>Total:</strong><span>3</span></div>

​