Javascript表多行单选按钮功能

Javascript table with multiple rows radio button function

本文关键字：单选按钮 功能 Javascript      更新时间：2023-09-26

我有一些麻烦来修复这段代码。我想知道我怎么能实现的功能，使所有的行与单选按钮工作。我不想为每个问题重复编写代码行。我想要一些简短而明确的DOM脚本没有Jquery。一行只能选择一个选项。这里是我的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>

你的代码有一些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>
相关文章：