jquery:如何检查是否选中了div中的所有单选按钮

Question

我的html如下所示

<div id="div1">
  <input type="radio" name="r1" value="v1" />
  <input type="radio" name="r1" value="v2" />
  <input type="radio" name="r1" value="v3" />

  <input type="radio" name="r2" value="v1" />
  <input type="radio" name="r2" value="v2" />
  <input type="radio" name="r2" value="v3" />

  <input type="radio" name="r3" value="v1" />
  <input type="radio" name="r3" value="v2" />
  <input type="radio" name="r3" value="v3" />
</div>

单选按钮是在我的html上动态生成的，所以在那个div中，我不知道我有多少个单选按钮。

我想确保用户在提交表单之前为每个单选按钮选择一个值，如何检查div中的所有单选按钮都选中了一个值？

谢谢

Answer 1

稍微调整一下你的超文本标记语言--把每个单选组包装在(比如说)一个中。然后，当用户提交表单时，您可以执行以下操作来验证表单：

if ($('div:not(:has(:radio:checked))').length) {
    alert("At least one group is blank");
}

当然，这可以通过各种方式进行调整以适应您的HTML。这个想法来自于Find all radio groups which haven't been selected

Answer 2

$(":radio").change(function() {
    var names = {};
    $(':radio').each(function() {
        names[$(this).attr('name')] = true;
    });
    var count = 0;
    $.each(names, function() { 
        count++;
    });
    if ($(':radio:checked').length === count) {
        alert("all answered");
    }
}).change();

演示：http://jsfiddle.net/yFaAj/15/

Answer 3

此处为解决方案 http://jsfiddle.net/QxdnZ/1/

    var checked = $("#div1 :radio:checked");
    var groups = [];
    $("#div1 :radio").each(function() {
        if (groups.indexOf(this.name) < 0) {
            groups.push(this.name);
        }
    });
    if (groups.length == checked.length) {
        alert('all are checked!');
    }
    else {
        var total = groups.length - checked.length;
        var a = total>1?' groups are ':' group is ';

        alert(total + a + 'not selected');
    }