CODEWITHSUNDEEP
javascriptjquery
wasimbhalli
wasimbhalli

Reputation: 5242

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

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>

Upvotes: 1

Views: 1831

Answers (5)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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 */
}

Upvotes: 2

gaurang171
gaurang171

Reputation: 9080

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

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

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 */  
}

Upvotes: 0

dnyan waychal
dnyan waychal

Reputation: 433

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
}

Upvotes: 0

Rishav Rastogi
Rishav Rastogi

Reputation: 15492

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
}

Upvotes: 0

Related Questions