验证是否选中了分组单选框

Validate whether grouped radio boxes are checked

本文关键字：单选框 是否 验证      更新时间：2023-09-26

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

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

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

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 可以避免拥有太多代码。

您可以使用 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/

相关文章：