How to sum radio button values using either Javascript or jQuery?

Question

Suppose I have 3 radio buttons with different values for each radio button and one textbox which would then display the sum of every radio button that is checked. Which Jquery or Javascript event should I use to sum up the values each time a radio button is clicked?

Originally, my radio button has a text box next to it for the purpose of displaying the value of the selected radio button but I am having difficulty firing an event to sum up the values from the text boxes that changes by itself(since keyup or keydown wont work on this given situation).

To better explain what I want to achieve, below is a sample from my work. Any help and tips would be appreciated. Thanks in advance.

P.S.: If it's not to much to ask, can you also add a working sample so I can play around with the working one. Thanks.

 Yes
<input type="radio" name="radio1" value="10" />
No
<input type="radio" name="radio1" value="0" /><br />
Yes
<input type="radio" name="radio2" value="10" />
No
<input type="radio" name="radio2" value="0" /><br />
Yes
<input type="radio" name="radio3" value="10" />
No
<input type="radio" name="radio3" value="0" /><br />
Total Score:
<input type="text" name="sum" />

i liked the first version of your question, so you did not have a need to edit it. But if, please do not forget to highlight code so every one can see the HTML Form elements. (using CTRL+K on selected text). My answer is written below with an example. hope it helps — Neysor
– Neysor, Commented Mar 20, 2012 at 23:22

Neysor · Accepted Answer · 2012-03-20 23:41:13Z

9

I would do it like that:

function calcscore(){
    var score = 0;
    $(".calc:checked").each(function(){
        score+=parseInt($(this).val(),10);
    });
    $("input[name=sum]").val(score)
}
$().ready(function(){
    $(".calc").change(function(){
        calcscore()
    });
});

See this js fiddle example

the html structure is equal to yours, only i added a class calc, so that i can selected them easier.

edited Mar 20, 2012 at 23:41

answered Mar 20, 2012 at 23:05

Neysor

3,91511 gold badges36 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

vzwick Over a year ago

Please do never use parseInt without the second (base) argument unless you like hunting for weird, weird bugs later on. Your 4th line should read score+=parseInt($(this).val(), 10);

Neysor Over a year ago

@vzwick i changed it. i know there can be some strange behavior, but mostly not if you have no leading zeros or something like that :)

vzwick Over a year ago

You can absolutely trust that the user (OP in this case) will manage to introduce a leading 0 eventually – Murphy's law ;) Cheers!

vzwick Over a year ago

Sheesh, you're totally right in this particular case – I completely forgot that :checked has made it into the CSS3 spec and is therefore natively supported by most modern browsers. Try your jsperf with IE8 (lacking native support for :checked) or check out this one (using jQuery's proprietary :selected selector) to see what I was talking about ;)

Neysor Over a year ago

@Davinchie_214 nice idea to provide me this question in a comment :) I'll take a look at it.

|

djibe · Accepted Answer · 2021-03-21 15:49:56Z

2

In pure JavaScript/EcmaScript I propose

document.addEventListener( 'DOMContentLoaded', event => {
    const text = document.getElementByTagName('sum')
    const radioElems = document.querySelectorAll('input[type="radio"]')
    radioElems.forEach((radioElem) => { radioElem.addEventListener('change', () => {
      count()
    }) })
    const count = () => {
      let score = 0
      document.querySelectorAll('input[type="radio"]:checked').forEach(radioChecked => {
        score += parseInt(radioChecked.value, 10)
        text.innerHTML = score
      })
    }
  })

edited Mar 21, 2021 at 15:49

answered Feb 26, 2021 at 21:11

djibe

3,0673 gold badges22 silver badges26 bronze badges

Comments

Diego · Accepted Answer · 2012-03-20 22:59:05Z

0

Assume radio buttons are inside a form with id='myForm', and textbox has id='totalScore' then:

var sum = 0;
$("#myForm").find("input[type='radio']:checked").each(function (i, e){sum+=$(e).val();});
$("#totalScore").val(sum);

answered Mar 20, 2012 at 22:59

Diego

18.5k5 gold badges67 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to sum radio button values using either Javascript or jQuery?

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related