Javascript table 具有多行单选按钮功能

Question

我在修复这段代码时遇到了一些问题。我想知道如何实现使所有行都使用单选按钮的功能。我不想为每个问题重复编写代码行。我想要 DOM scriptiong no 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>

Answer 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>

Javascript table 具有多行单选按钮功能

Javascript table with multiple rows radio button function

javascript

html-table

function

radio-button