How to check if any of the Radio buttons are checked or not when clicked on submit button

debugcn Published at Dev

Pawan

$('#customer_details_table').find("input").each(function(i, obj) {
        if (obj.checked == true) {
            var customer_id = obj.id;
        } else {
            alert('Need to select atlease one radio button');
            event.stopImmediatePropagation();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover dataTable" id="customer_details_table" aria-describedby="sample_1_info" style="display: table;">
   <thead>
      <tr>
         <th></th>
         <th>Customer Name</th>
         <th>Address</th>
         <th>Contact No.</th>
         <th>Email</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody class="odd gradeX">

      <tr>
         <td><label class="radio"><input type="radio" class="bradio" id="20" name="optionsRadios1" value="option1"></label></td>
         <td width="20%">kiran</td>
         <td width="25%">XXXXXXX</td>
         <td width="20%">7654321987</td>
         <td width="20%">[email protected]</td>
         <td width="10%" align="center"><span class="label label-inverse">DeActive</span></td>
      </tr>

      <tr>
         <td><label class="radio"><input type="radio" class="bradio" id="28" name="optionsRadios1" value="option1"></label></td>
         <td width="20%">kiran</td>
         <td width="25%">XXXXXXX</td>
         <td width="20%">9701429843</td>
         <td width="20%">[email protected]</td>
         <td width="10%" align="center"><span class="label label-inverse">DeActive</span></td>
      </tr>

   </tbody>
</table>

When clicked on Activate button i need to check if any of the radio buttons are checked are not ??

Even though i am selecting a radio button , its going to else condition ??

<table class="table table-striped table-bordered table-hover dataTable" id="customer_details_table" aria-describedby="sample_1_info" style="display: table;">
   <thead>
      <tr>
         <th></th>
         <th>Customer Name</th>
         <th>Address</th>
         <th>Contact No.</th>
         <th>Email</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody class="odd gradeX">

      <tr>
         <td><label class="radio"><input type="radio" class="bradio" id="20" name="optionsRadios1" value="option1"></label></td>
         <td width="20%">kiran</td>
         <td width="25%">XXXXXXX</td>
         <td width="20%">7654321987</td>
         <td width="20%">[email protected]</td>
         <td width="10%" align="center"><span class="label label-inverse">DeActive</span></td>
      </tr>

      <tr>
         <td><label class="radio"><input type="radio" class="bradio" id="28" name="optionsRadios1" value="option1"></label></td>
         <td width="20%">kiran</td>
         <td width="25%">XXXXXXX</td>
         <td width="20%">9701429843</td>
         <td width="20%">[email protected]</td>
         <td width="10%" align="center"><span class="label label-inverse">DeActive</span></td>
      </tr>

   </tbody>
</table>

       <button type="button" id="deactivebtn" class="btn blue" style="display: inline-block;">Activate</button>


$(document).on('click', '#deactivebtn', function(event) {
    $('#customer_details_table').find("input").each(function(i, obj) {
        if (obj.checked == true) {
            var customer_id = obj.id;
        } else {
            alert('Need to select atlease one radio button');
            event.stopImmediatePropagation();
        }
    });

});

Could anybody please help me how to resolve this ??

dfsq

You get "Need to select atlease one radio button" messsage because you are checking all radio inputs, and there is always going to be one unchecked.

Improved version of your code using find(":radio:checked") selector:

$(document).on('click', '#deactivebtn', function(event) {
    var $checked = $('#customer_details_table').find(":radio:checked");
    if (!$checked.length) {
        alert('Need to select atlease one radio button');
        event.stopImmediatePropagation();
    }
    else {
        var customer_id = $checked[0].id;
        alert(customer_id)
    }
});