How to check a set of radio buttons that all are selected?

Question

I've a list of radio buttons that are generated dynamically. The names of radio buttons are also generated dynamically. The first row of radio buttons has name 1, the second row radio buttons have name 2. Each row has three radio buttons with same name but different values.

How can I check using jquery that one radio button is selected in each row when submitting the form?

<tr>
                            <th>1</th>
                            <td> Please select one option </td>
                            <td class='selectable_cell'>
                            <input type="radio" name="2" value="1" />
                            </td>
                            <td class='selectable_cell'>
                            <input type="radio" name="2" value="2" />
                            </td>
                            <td class='selectable_cell'>
                            <input type="radio" name="2" value="3" />
                            </td>
                        </tr>
<tr>
                            <th>2</th>
                            <td> Please select another option </td>
                            <td class='selectable_cell'>
                            <input type="radio" name="3" value="1" />
                            </td>
                            <td class='selectable_cell'>
                            <input type="radio" name="3" value="2" />
                            </td>
                            <td class='selectable_cell'>
                            <input type="radio" name="3" value="3" />
                            </td>
                        </tr>

Answer 1

Assuming that each row of radio buttons is wrapped into a specific element (e.g. a <fieldset> or a <tr>) you could easily check (at submit event) if the amount of wrapper elements is equal to the number of selected radio, with

var group = $('#yourform tr');
if (group.length === group.find('input[type="radio"]:checked').length) {
   /* you choose one radio for each group */
}

Answer 2

I think you can add classes or ids to the rows something like #row1, #row2. After that its fairly easy

// gives you the no of radio buttons checked in first row
// $('input[type=radio]:checked', '#row1')

// gives you the no of radio buttons checked in second row
// $('input[type=radio]:checked', '#row2')

if($('input[type=radio]:checked', '#row1').length > 0 and $('input[type=radio]:checked', '#row2') > 0 ) {

 // your code goes here
}

Answer 3

Try this

 var names = {};
  $(':radio').each(function() {
      names[$(this).attr('name')] = true;
  });
 var count = 0;
 $.each(names, function() { 
     count++;
  });
if ($(':radio:checked').length === count) {
    //All Checked
}

Answer 4

like this:

Demo: http://jsfiddle.net/K2WsA/ and from your updated code and minor change: http://jsfiddle.net/K2WsA/1/

behaviour: in demo select at least one in both the group and you will get an alert.

hope it helps!

group them according to names:

  if($("input[type=radio][name=foo]:checked").length > 0 &&   
   $("input[type=radio][name=bar]:checked").length > 0)  
{      
/* do something */  
}  

Answer 5

Here on below demo link, i have done complete bins for above issue. so please check once it may help you.

Demo: http://codebins.com/bin/4ldqp9l

HTML:

<table id="table1" cellpadding="0" cellspacing="0" width="70%">
  <tr>
    <th>
      1
    </th>
    <td>
      Please select one option 
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd1" value="1" />
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd1" value="2" />
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd1" value="3" />
    </td>
  </tr>
  <tr>
    <th>
      2
    </th>
    <td>
      Please select another option 
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd2" value="1" />
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd2" value="2" />
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd2" value="3" />
    </td>
  </tr>
  <tr>
    <th>
      3
    </th>
    <td>
      Please select another option 
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd3" value="1" />
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd3" value="2" />
    </td>
    <td class='selectable_cell'>
      <input type="radio" name="rd3" value="3" />
    </td>
  </tr>
</table>
<br/>
<input type="button" id="btncheck" name="btncheck" value="Check Radio Selection" />
<div id="result">
</div>

CSS:

table#table1{
  border:1px solid #225599;
}
table#table1 th{
  border:1px solid #225599;
  padding:2px;
  background:#a48866;
}
table#table1 td{
  border:1px solid #225599;
  padding:2px;
  background:#94dbfd;
}
.error{
  color:#ca1619;
}
.success{
  color:#006633;
}

JQuery:

$(function() {
    $("#btncheck").click(function() {
        var result = "";
        $("table#table1").find("tr").each(function() {
            var row = $.trim($(this).find("th").text());
            if ($(this).find("input[type=radio]:checked").length > 0) {
                var opValue = $(this).find("input[type=radio]:checked").val();
                result += "<p class='success'>Row " + row + ": The option with value \"" + opValue + "\" has been selected... :)</p>";
            } else {
                result += "<p class='error'>Row " + row + ": No option has been selected..!</p>";
            }

            if (result != "") {
                $("div#result").html(result);
            }
        });
    });
});

Demo: http://codebins.com/bin/4ldqp9l