Как суммировать значения переключателей, используя Javascript или jQuery?

Question

Предположим, у меня есть 3 переключателя с разными значениями для каждого переключателя и одно текстовое поле, которое затем отображало бы сумму всех переключаемых переключателей. Какое событие Jquery или Javascript следует использовать для суммирования значений при каждом нажатии радиокнопки?

Первоначально моя радио-кнопка имела текстовое поле рядом с ней для отображения значения выбранной радио-кнопки, но у меня возникают трудности при запуске события для суммирования значений из текстовых полей, которые изменяются сами по себе (так как keyup или keydown не будут работать в данной ситуации).

Чтобы лучше объяснить, чего я хочу достичь, ниже приведен пример из моей работы. Любая помощь и советы будут оценены. Заранее спасибо.

P.S .: Если не так много вопросов, можете ли вы добавить рабочий образец, чтобы я мог поиграть с рабочим. Спасибо.

 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" />

Answer 1

Я бы сделал это так:

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()
    });
});

Посмотрите на этот пример js fiddle

структура HTML равна вашей, только я добавил класс calc, так что я могу выбрать их проще.

Answer 2

Предположим, что переключатели находятся внутри формы с id = 'myForm', а текстовое поле имеет id = 'totalScore' тогда:

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