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

Question

my html looks like this

<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>

radio buttons are dynamically generated on my html so in that div i don't know how many radio buttons i have.

i want to make sure that the user will select a value for each one of them before he submits the form, how can i check that all radio buttons inside my div has a value checked?

Thank you

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

Demo: http://jsfiddle.net/yFaAj/15/

Answer 2

Restructure your HTML slightly - wrap each radio group in (say) a div. Then you can just do something like this to validate the form when the user submits it:

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

Of course this can be tweaked in various ways to suit your HTML. The idea was from Find all radio groups which haven't been selected

Answer 3

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

Answer 4

Looking for something along these lines? http://jsfiddle.net/gXsZp/3/

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

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

  <input type="radio" name="r3" value="v1" />
  <input type="radio" name="r3" value="v2" />
  <input type="radio" name="r3" value="v3" />
</div>
<br/>
<input id="btn" type="submit" text="submit"/>



$('#btn').click(function(){
    if ( $('#div1 input:radio:checked').size() == 3 )    
        return true;
    return false;
});

Answer 5

Validate the form when the user submits it, using this validation code.

var blank = false;
$("input:radio").each(function() {
    var val = $('input:radio[name=' + this.name + ']:checked').val();
    if (val === undefined) {
        blank = true;
        return false;
    }
});
alert(blank ? "At least one group is blank" : "All groups are checked");

First we get the names of all the radio button groups, then check that each one has a value. (Actually we're doing multiple checks, but that doesn't really matter.)

Answer 6

Try this:

function check(){
    var allCheck = true;
    if($("#div1 :radio:checked").length==0){
        allCheck=false;
    }
    $("#div1 :radio").each(function(){
    for(var i=0;i<$("#div1 :radio:checked").length;i++)
    if($(this).attr("name")===$($("#div1 :radio:checked")[i]).attr("name")) 
                break;
    else if(i==$("#div1 :radio:checked").length-1) 
                allCheck = false;
    });

    return allCheck;
}

Answer 7

Try this one:

$('input:radio', $('#div1')).each(function() {
    if(name && name == $(this).attr('name'))
        return true; // Skip when checking the same element name. 

    name = $(this).attr('name');

    if(! $('input:radio[name="' + name + '"]:checked').length) {
        alert('Oops, you missed some input there.. [' + name + ']');
        return false;
    }
});

It will loop through every radio button to check for checked radio & will break as soon it found non-checked radio group (first error found). But if you prefer to get all the errors (not only the first error found), just remove return false .

Answer 8

This will work:

if($("#div1").children("input:radio:checked").size() == 3) 
{
   alert('three inputs were checked'); 
}