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

$(":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 2

稍微重构您的HTML - 将每个广播组包装在(例如)div中.然后,当用户提交表单时,您可以执行以下操作来验证表单:

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

当然,可以通过各种方式调整以适应您的HTML.这个想法来自查找尚未被选中的所有无线电组

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