總結單選按鈕的自定義屬性並在文本框中顯示

Question

我有多個包含單選按鈕的問題（每個單選按鈕都有其自己的自定義屬性：數值）。

 $("input[type='button']").click(function() { function marking() { let q1 = $("input[name='age']:checked").attr('data-mark'); let q2 = $("input[name='race']:checked").attr('data-mark'); var total = parseInt(q1) + parseInt(q2); document.getElementById('result').value = total; } marking(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li> <font size="4">What is your age?</font><br> <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked"> <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp; <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24"> <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br> <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59"> <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp; <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74"> <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li> <li> <font size="4">Please specify your race</font><br> <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked"> <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp; <input type="radio" name="race" id="M" data-mark='1' value="M"> <label for="M"><font size="4">Malay</font></label><br> <input type="radio" name="race" id="I" data-mark='2' value="I"> <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp; <input type="radio" name="race" id="O" data-mark='5' value="O"> <label for="O"><font size="4">Others</font></label><br><br></li> <input type="button" name="button" value="Get Value" onclick="marking()"> <input type="text" id="result" name="result" value="" readonly> 

如果將這些代碼放入新創建的php文件中，則可以毫無問題地運行。 但是如果放入我創建的php文件中，則會出現問題（該值無法在文本框中顯示）。 我不知道發生了什么事。 我在互聯網上搜索，但未找到結果。
任何意見或建議，將不勝感激。 先感謝您

Answer 1

您可以刪除html onclick="marking()"中的代碼，因為您已經聲明了jQuery的$("input[type='button']").click(function() {...}); 處理結果計算。

碼：

 $("input[type='button']").click(function() { const q1 = +$("input[name='age']:checked").attr('data-mark'); const q2 = +$("input[name='race']:checked").attr('data-mark'); document.getElementById('result').value = q1 + q2; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li> <font size="4">What is your age?</font><br> <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked"> <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp; <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24"> <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br> <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59"> <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp; <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74"> <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li> <li> <font size="4">Please specify your race</font><br> <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked"> <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp; <input type="radio" name="race" id="M" data-mark='1' value="M"> <label for="M"><font size="4">Malay</font></label><br> <input type="radio" name="race" id="I" data-mark='2' value="I"> <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp; <input type="radio" name="race" id="O" data-mark='5' value="O"> <label for="O"><font size="4">Others</font></label><br><br></li> <input type="button" name="button" value="Get Value"> <input type="text" id="result" name="result" value="" readonly> 

Answer 2

 $("input[type='button']").click(function() { marking(); }); function marking() { let q1 = $("input[name='age']:checked").attr('data-mark'); let q2 = $("input[name='race']:checked").attr('data-mark'); var total = parseInt(q1) + parseInt(q2); document.getElementById('result').value = total; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li> <font size="4">What is your age?</font><br> <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked"> <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp; <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24"> <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br> <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59"> <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp; <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74"> <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li> <li> <font size="4">Please specify your race</font><br> <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked"> <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp; <input type="radio" name="race" id="M" data-mark='1' value="M"> <label for="M"><font size="4">Malay</font></label><br> <input type="radio" name="race" id="I" data-mark='2' value="I"> <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp; <input type="radio" name="race" id="O" data-mark='5' value="O"> <label for="O"><font size="4">Others</font></label><br><br></li> <input type="button" name="button" value="Get Value" onclick="marking()"> <input type="text" id="result" name="result" value="" readonly>