具有多行单选按钮功能的 Javascript 表答案

【问题标题】：Javascript table with multiple rows radio button function具有多行单选按钮功能的 Javascript 表
【发布时间】：2017-07-16 00:52:18
【问题描述】：

我在修复此代码时遇到了一些麻烦。我想知道如何实现该功能以使所有行都使用单选按钮。我不想为每个问题重复编写代码行。我想在没有 Jquery 的 DOM scriptiong 中简短明了。一行只能选择一个选项。这是我的js和html代码

<!DOCTYPE html>
<html>

    <body>

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

        for (i = 0; i<len; i++) {
                if (document.row.selectedAge[i].value;
                break;
            }
        }
        if (selectedAge == "") {
                document.getElementByid("radio_error").innnerHTML = "no option selected";
                return false
        }
        else {
                document.getElementById("radio_error").innerHTML = "";
                return true;
        }
    }

    </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="none" name="selectedAge" value="1-25">1-25</td>
                                <td><input type="radio" id="low" name="selectedAge" value="26-40">26-40</td>
                                <td><input type="radio" id="medium" name="selectedAge" value="41-60">41-60</td>
                                <td><input type="radio" id="high" name="selectedAge" value="60+">1-25</td>
                            </tr>

                            <tr>
                                <th scope="row"><div class="lefttext">What is you BMI?</div></th>
                                <td><input type="radio" id="none" name="selectedBmi1" value="0-25">0-25</td>
                                <td><input type="radio" id="low" name="selectedBmi2" value="26-30">26-30</td>
                                <td><input type="radio" id="medium" name="selectedBmi3" value="31-35">31-35</td>
                                <td><input type="radio" id="high" name="selectedBmi4" value="35+">35+</td>
                            </tr>
                            <tr>
                                <th scope="row"><div class="lefttext">Does anybody in your family have diabetes?</div></th>
                                <td><input type="radio" id="none" name="selectedDiabete1" value="no">No</td>
                                <td><input type="radio" id="low" name="selectedDiabete2" value="grandparent">Grandparent</td>
                                <td><input type="radio" id="medium" name="selectedDiabete3" value="sibling">Sibling</td>
                                <td><input type="radio" id="high" name="selectedDiabete4" value="parent">Parent</td>
                            </tr>
                            <tr>
                                <th scope="row"><div class="lefttext">How would you describe your diabete</div></th>
                                <td><input type="radio" id="none" name="description1" value="low sugar">Low sugar</td>
                                <td><input type="radio" id="low" name="description2" value="normal sugar">Normal sugar</td>
                                <td><input type="radio" id="medium" name="description3" value="quite high sugar">Quite high sugar</td>
                                <td><input type="radio" id="high" name="description4" value="high sugar">High sugar</td>
                            </tr>
                        </table>


    </body>
</html>

【问题讨论】：

你从哪里打电话给checkRadio()？
稍后我必须实现一个验证按钮，但现在我专注于如何实现为每个问题运行的函数

标签： javascript function html-table radio-button

【解决方案1】：

您的代码有一些 javascript 错误。我解决了这些错误。

这是您修改后的脚本：

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

function init(){
    for (i = 0; i<len; i++) {
        if (document.row.selectedAge[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>

【讨论】：