How to sum and subtract total of each radio values using either Javascript or jQuery

Question

I have a multiple radio elements and the options are integer. For each radios, I'm getting the default option to sum up the total.

Then, on change event, I would like to sum or subtract the total based on selected option.

In javascript, I'm able to get the total, but don't know how to sum and subtract values on change. Hereunder my current markup and script:-

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. Just call the adding in the change event of the radio button
2. Initialize the total inside change event so that you can make the change every time you select and unselect.

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>