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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.