javascript - 验证是否选中分组单选框

Question

我正在尝试检查是否已检查每组至少一个单选按钮，非常感谢对我的特殊情况提供一些帮助。

<tr>
 <td> Group1 </td>
     <td><input type="radio" id="wahl1" name="wahl1" value="1"></td>
     <td><input type="radio" id="wahl1" name="wahl1" value="2"></td>
     <td><input type="radio" id="wahl1" name="wahl1" value="3"></td>
     <td><input type="radio" id="wahl1" name="wahl1" value="4"></td>
     <td><input type="radio" id="wahl1" name="wahl1" value="5"></td>
     <td><input type="radio" id="wahl1" name="wahl1" value="6"></td>
     <td><input type="radio" id="wahl1" name="wahl1" value="7"></td>
   </tr>
   <tr>
 <td> Group2 </td>
     <td><input type="radio" id="wahl2" name="wahl2" value="1"></td>
     <td><input type="radio" id="wahl2" name="wahl2" value="2"></td>
     <td><input type="radio" id="wahl2" name="wahl2" value="3"></td>
     <td><input type="radio" id="wahl2" name="wahl2" value="4"></td>
     <td><input type="radio" id="wahl2" name="wahl2" value="5"></td>
     <td><input type="radio" id="wahl2" name="wahl2" value="6"></td>
     <td><input type="radio" id="wahl2" name="wahl2" value="7"></td>
   </tr>
<tr>

我试图用纯 javascipt 函数来解决这个问题，出于我的目的，该函数必须在按钮内定义，如下所示:

<input name="submFragebogen2" type="submit" id="fragebogen2"  value="Absenden" style="display: none">

<input type="button" value="Absenden" onclick="
    function test2() {

        var radios  = document.getElementsByName("input");
        var counter = 0;
        for (var i = 0, len = radios.length; i < len; i++) {
            if (radios[i].checked) {
                counter = counter +  1;
            }
        }     
        if (counter != 2) {
            alert('Please choose an option in each row.');
        } else {
            var subButton2 = document.getElementsByName('submFragebogen2')[0];
            subButton2.style.display='inline';
            subButton2.click();
            subButton2.style.display='none'
        }
    };
    test2();"

Answer 1

使用querySelectorAll仅获取单选按钮。

document.getElementsByName("input") 将返回所有类型的输入。

例如按钮、文本字段、隐藏字段等

function test2() {

        var radios = document.querySelectorAll("input[type=radio]")
        var counter = 0;
        for (var i = 0, len = radios.length; i < len; i++) {
            ...
        }
        if (counter != 2) {
            alert('Please choose an option in each row.');
        } else {
            ..
        }
    };

HTML:

<input type="button" value="Absenden" onclick="test2()"/>