验证是否对分组收音机进行了检查

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> 

我试图用纯SCRIPT关闭它，我的目的有一个按钮里面定义这样来解决这个问题：

<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

为此，您可以使用JQuery用下面的代码：

$("[name=wahl1]:checked").length > 0 

的选择将只选择与已检查名称 “wahl1” 的投入。然后你只要看看是否有不止一个。

如果你正在寻找一个纯JavaScript代码试试这个：

var elements = document.getElementsByName("wahl2"), checked = false; 
for(var i=0; i<elements.length-1; i++){ 
    checked = checked || elements[i].checked; 
} 
if(!checked){ 
    alert("Please select at least one."); 
} 

的jsfiddle：https://jsfiddle.net/z6eud4kx/

Answer 2

使用querySelectorAll到只有单选按钮。

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

例如按钮，文本框，隐藏的field.etc。

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()"/> 

Answer 3

一些错误的HTML代码。该id应该是唯一的。删除相同的输入ID。

与纯JavaScript，你需要这样的代码：

function checkRadios() { 
    var wahl1RadiosChecked = false; 
    var wahl2RadiosChecked = false; 

    var wahl1Radios = document.getElementsByName('wahl1'); 
    var wahl2Radios = document.getElementsByName('wahl2'); 


    for(i = 0; i < wahl1Radios.length; i++) { 
    if(wahl1Radios[i].checked) { 
     wahl1RadiosChecked = true; 
    } 
    } 

    for(i = 0; i < wahl2Radios.length; i++) { 
    if(wahl2Radios[i].checked) { 
     wahl2RadiosChecked = true; 
    } 
    } 

    if (wahl1RadiosChecked === false || wahl2RadiosChecked === false) { 
    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'; 
    } 
} 

你需要调用这个函数内按钮。

这里是例子：https://jsbin.com/wujuwimide/edit?html,js,console,output

当然使用jQuery，您就不必那么多的代码。