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>