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，然后检查 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++;
}