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 example

html结构与你的相同，只有我添加了一个类calc，这样我才能更容易地选择它们。

Answer 2

我建议使用纯 JavaScript/EcmaScript

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

Answer 3

假设单选按钮位于id ='myForm'的表单内，textbox的id ='totalScore'则为：

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

如何使用Javascript或jQuery对单选按钮值进行求和？

3 个答案: