jQuery中的动态单选按钮组验证

Question

什么是验证以确保每个组中至少有一个被选中的最佳方式是什么，因此在下面的示例中，组是name1,name2, name3？

例

<input type="radio" name="name1"> 
<input type="radio" name="name1"> 
<input type="radio" name="name1"> 

<input type="radio" name="name2"> 
<input type="radio" name="name2"> 
<input type="radio" name="name2"> 

<input type="radio" name="name3"> 
<input type="radio" name="name3"> 
<input type="radio" name="name3"> 

我知道我可以换一个div每一个周围，然后在div检查每个单选按钮，但我期待一个更动态的解决方案。所以，如果将来会增加更多的单选按钮，那么jQuery代码就不需要修改，或者div也不需要添加 - 我希望这是有道理的。

Answer 1

您应该使用jquery.validate.js库来帮你解决这个问题，看看他们的demo

如果您使用的库那将是一样简单，

<input type="radio" name="name1" validate="required:true"> 
<input type="radio" name="name1"> 
<input type="radio" name="name1"> 

<input type="radio" name="name2" validate="required:true"> 
<input type="radio" name="name2"> 
<input type="radio" name="name2"> 

退房的jFiddle：此发现所有不同的单选按钮的名称，然后遍历所有不同的组，并确保至少有一个检查，如果不是，它会引发警报。

$('#button').click(function() { 
    var names = []; 

    $('input[type="radio"]').each(function() { 
     // Creates an array with the names of all the different checkbox group. 
     names[$(this).attr('name')] = true; 
    }); 

    // Goes through all the names and make sure there's at least one checked. 
    for (name in names) { 
     var radio_buttons = $("input[name='" + name + "']"); 
     if (radio_buttons.filter(':checked').length == 0) { 
      alert('none checked in ' + name); 
     } 
     else { 
      // If you need to use the result you can do so without 
      // another (costly) jQuery selector call: 
      var val = radio_buttons.val(); 
     } 
    } 
}); 

Answer 2

$('[name="name1"]:checked').length != 0 

或者

$('[name="name1"]').is(':checked') 

你也可以做一些更动态的，如果你喜欢：

var i = 1; 
while ($('[name="name'+i+'"]').length != 0) { 
    if ($('[name="name'+i+'"]').is(':checked')) { 
     // at least one is checked in this group 
    } else { 
     // none are checked 
    } 
    i++; 
}