使用 table 中的 javascript 函数获取单选按钮值的总和

Question

我希望通过单选按钮无需查询即可获得这 4 个不同值的总和。这里是我的javascript和html，点击提交后，总计字段出现0，谢谢大家的帮助！

  <!DOCTYPE html>
 <html>

<body>

<script>    
function checkRadio() {
var selectedAge="";
var selectedBmi="";
var selectedDiabete="";
var description="";
var len = document.row.length;
var i;

function init(){
 for (i = 0; i<len; i++) {
    if (document.row[i].value);
    break;
}

 if (selectedAge == "") {
     document.getElementByid("radio_error").innnerHTML = "no option     selected";
    return false
}
else {
        document.getElementById("radio_error").innerHTML = "";
        return true;
}

}
init();

}

</script>


<script>
function addNumbers()
            {
        var val1 = parseInt(document.getElementById("value1").value);
        var val2 = parseInt(document.getElementById("value2").value);
        var val3 = parseInt(document.getElementById("value3").value);
        var val4 = parseInt(document.getElementById("value4").value);
        var ansD = document.getElementById("answer");
        ansD.value = val1 + val2 + val3 + val4;
            }
</script>

    <table>

                        <tr>
                            <th scope="col"></th>
                            <th scope="col">noRisk</th>
                            <th scope="col">lowRisk</th>
                            <th scope="col">mediumRisk</th>
                            <th scope="col">HighRisk</th>
                        </tr>
                        <tr>
                            <th scope="row"><div class="lefttext">How old are you?</div></th>

                            <td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="0"checked>1-25</td>
                            <td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="5">26-40</td>
                            <td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="8">41-60</td>
                            <td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="10">1-25</td>
                        </tr>

                        <tr>
                            <th scope="row"><div class="lefttext">What is you BMI?</div></th>
                            <td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="0" checked>0-25</td>
                            <td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="0">26-30</td>
                            <td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="9">31-35</td>
                            <td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="10">35+</td>
                        </tr>
                        <tr>
                            <th scope="row"><div class="lefttext">Does anybody in your family have diabetes?</div></th>
                            <td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="0" checked>No</td>
                            <td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="7">Grandparent</td>
                            <td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="15">Sibling</td>
                            <td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="15">Parent</td>
                        </tr>
                        <tr>
                            <th scope="row"><div class="lefttext">How would you describe your diabete</div></th>
                            <td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="0" checked >Low sugar</td>
                            <td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="0">Normal sugar</td>
                            <td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="7">Quite high sugar</td>
                            <td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="10">High sugar</td>
                        </tr>
                    </table>
                     <input type="button" name="Sumbit" value="Submit" onclick="javascript:addNumbers()"/>
                     Total  = <input type="text" id="answer" name="answer" value=""/>

</body>

Answer 1

您必须指定您只需要选中的复选框的值。您现在 select 所有复选框。试试这个：

function addNumbers()
{
    var val1 = parseInt(document.querySelector('input[name = "selectedAge"]:checked').value);
    var val2 = parseInt(document.querySelector('input[name = "selectedBmi"]:checked').value);
    var val3 = parseInt(document.querySelector('input[name = "selectedDiabete"]:checked').value);
    var val4 = parseInt(document.querySelector('input[name = "description"]:checked').value);
    var ansD = document.getElementById("answer");

    ansD.value = val1 + val2 + val3 + val4;
}

Answer 2

Here 是工作示例。

基本上： <pre> var sum = function(a, b) { return a + b; }; var getPollResult = function() { var checkedRadioButtons = document.querySelectorAll('table input[type="radio"]:checked'); return Array.prototype.map.call(checkedRadioButtons, function(radio) { return parseInt(radio.value, 10); }).reduce(sum, 0); }; document.getElementById("submit").addEventListener('click', function() { document.getElementById("answer").value = getPollResult(); }); </pre>

使用 table 中的 javascript 函数获取单选按钮值的总和

Get sum of radio button value using javascript function in table

javascript

function

radio-button