验证是否已选中分组的单选框

时间:2016-03-07 18:50:30

标签: javascript html

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

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

3 个答案:

答案 0 :(得分:1)

使用querySelectorAll只获取单选按钮。

head(format(mysteryOne[, 1], nsmall = 2L, digits = 2)) # [1] "19.99" "26.39" "30.39" "20.31" "21.32" "23.22" 将返回所有类型的输入。

e.g。按钮,文本字段,隐藏字段。等。

document.getElementsByName("input")

HTML:

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 {
            ..
        }
    };

答案 1 :(得分:0)

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';
  }
}

在按钮内,您需要调用此功能。

以下是示例:offical list of criteria

当然,使用jquery,你可以避免使用这么多代码。

答案 2 :(得分:-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/