Sum Checked 单选按钮值不起作用

Question

我目前尝试对单选按钮选择的值求和，但我无法使其工作，我错过了什么？

 $(document).ready(function() { function calcscore(){ var score = 0; var ele = document.getElementsByClassName("r1"); for(i = 0; i < ele.length; i++) { if(ele[i].checked) { score += parseInt(ele[i].value); } } $("input[name=sum]").val(score) } function change(){ $("val.(score)").change(function(){ calcscore() }); }; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label class="radio-inline"> <input class="r1" type="radio" name="a2" value="9" />Option 1 </label> <label class="radio-inline"> <input class="r1" type="radio" name="a2" value="18" />Option 2 </label> <label class="radio-inline"> <input class="r1" type="radio" name="a2" value="10" />Option 3 </label> <br /> <label class="radio-inline"> <input class="r1" type="radio" name="a3" value="10" />Option 1 </label> <label class="radio-inline"> <input class="r1" type="radio" name="a3" value="10" />Option 2 </label> <label class="radio-inline"> <input class="r1" type="radio" name="a3" value="10" />Option 3 </label> <br /> <input type="text" name="sum" /> </form>

如果你能找到问题所在，能否给我每行的详细信息，以便我从中吸取教训？

谢谢

Answer 1

$("val.(score)"). 不是您在更改 function 时调用的有效元素。

我已经分配了一个 class .score或者您也可以将.r1用于您拥有的所有输入类型，这些输入类型将在change时调用 function

还可以考虑使用 total jQuery或 Pure JS来混合使用两者以避免混淆。

我在下方添加了jQuery唯一解决方案，您可以选择最适合您的解决方案。

根据您的代码混合 JS 和 jQuery

运行下面的代码片段以查看它是否正常工作。

 function calcscore() { var score = 0; var ele = document.getElementsByClassName("r1"); for (i = 0; i < ele.length; i++) { if (ele[i].checked) { score += parseInt(ele[i].value); } } $("input[name=sum]").val(score) } function change() { $(".score").on('change', function() { calcscore() }); } change()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label class="radio-inline"> <input class="r1 score" type="radio" name="a2" value="9">Option 1 </label> <label class="radio-inline"> <input class="r1 score" type="radio" name="a2" value="18">Option 2 </label> <label class="radio-inline"> <input class="r1 score" type="radio" name="a2" value="10">Option 3 </label> <br> <label class="radio-inline"> <input class="r1 score" type="radio" name="a3" value="10">Option 1 </label> <label class="radio-inline"> <input class="r1 score" type="radio" name="a3" value="10">Option 2 </label> <label class="radio-inline"> <input class="r1 score" type="radio" name="a3" onchange=() value="10">Option 3 </label> <br> <input type="text" name="sum" /> </form>

仅使用 Jquery 和.each() function

如果您只想通过 jQuery 进行此操作。 这是工作代码。

我们可以使用.r1 class 并使用:checked检查哪个元素被检查并通过.each的数据获取它的值并以这种方式求和。

 function calcscore(_this) { var score = 0; $('.r1:checked').each(function(index, data) { score += parseInt(data.value); }) $("input[name=sum]").val(score) } function change() { $(".score").on('change', function() { calcscore() }); } change()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label class="radio-inline"> <input class="r1 score" type="radio" name="a2" value="9">Option 1 </label> <label class="radio-inline"> <input class="r1 score" type="radio" name="a2" value="18">Option 2 </label> <label class="radio-inline"> <input class="r1 score" type="radio" name="a2" value="10">Option 3 </label> <br> <label class="radio-inline"> <input class="r1 score" type="radio" name="a3" value="10">Option 1 </label> <label class="radio-inline"> <input class="r1 score" type="radio" name="a3" value="10">Option 2 </label> <label class="radio-inline"> <input class="r1 score" type="radio" name="a3" value="10">Option 3 </label> <br> <input type="text" name="sum" /> </form>

Answer 2

首先， $("val.(score)")不是有效元素。 请改用$(".r1") 。

其次， change() function 应该触发注册输入变化。 您可以通过在最后调用change()或使用 jQuery 事件侦听器（如内部 function）来实现

 function calcscore() { var score = 0; var ele = document.getElementsByClassName("r1"); for (i = 0; i < ele.length; i++) { if (ele[i].checked) { score += parseInt(ele[i].value); } } $("input[name=sum]").val(score); } $(".r1").change(calcscore);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <label class="radio-inline"> <input class="r1" type="radio" name="a2" value="9">Option 1 </label> <label class="radio-inline"> <input class="r1" type="radio" name="a2" value="18">Option 2 </label> <label class="radio-inline"> <input class="r1" type="radio" name="a2" value="10">Option 3 </label> <br> <label class="radio-inline"> <input class="r1" type="radio" name="a3" value="10">Option 1 </label> <label class="radio-inline"> <input class="r1" type="radio" name="a3" value="10">Option 2 </label> <label class="radio-inline"> <input class="r1" type="radio" name="a3" value="10">Option 3 </label> <br> <input type="text" name="sum" /> </form>