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

【问题标题】：Get sum of radio button value using javascript function in table使用表中的 javascript 函数获取单选按钮值的总和
【发布时间】：2015-07-31 21:47:14
【问题描述】：

我希望通过单选按钮无需查询即可获得这 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>

【问题讨论】：

id 属性在 HTML 文档中必须是唯一的。你的代码还有其他的不足，其实这里就不一一列举了。

标签： javascript function radio-button

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

Here 是工作示例。

基本上：

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

【讨论】：