javascript - 如何使用 Javascript 或 jQuery 对每个单选值求和或相减

Question

我有多个单选元素，并且选项是整数。对于每个 radio ，我都使用默认选项来汇总总数。

然后，在更改事件时，我想根据所选选项求和或减去总数。

在 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. 只需在单选按钮的change事件中调用添加即可
2. 初始化总内部更改事件，以便您可以在每次选择和取消选择时进行更改。

Note: Added name for each set of radio button so you can unselect and the setting of total in total span.

$('.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>