CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

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

$('#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 ??

Upvotes: 1

Views: 1126

Answers (6)

chanchal
chanchal

Reputation: 594

@preethi jain your code is here

$(document).on('click', '#deactivebtn', function(event) {
    event.stopPropagation();
    var checked = $("input[name='optionsRadios1']:checked");
    alert(checked.attr('id'));
});

Demo checkout the link

Upvotes: 0

Sinri Edogawa
Sinri Edogawa

Reputation: 331

JS:

<script type="text/javascript">

        $(document).ready(function(){
            $radio_selected=false;
            $("#deactivebtn").bind('click',function(event){
                var radio_selected=false;
                $('#customer_details_table').find(":radio").each(function(i, obj) {
                    if (obj.checked === true) {
                        var customer_id = obj.id;
                        radio_selected=true;
                    } else {
                        if(i==2-1 && !radio_selected){
                            alert('Need to select at least one radio button');
                            event.stopImmediatePropagation();
                        }
                    }
                });
            });
        });
    </script>

HTML kept as the same.

Upvotes: 0

Anujith
Anujith

Reputation: 9370

Only need to check if any of the radio button is checked:

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

DEMO

Upvotes: 0

tobltobs
tobltobs

Reputation: 2929

Try something like:

$(document).on('click', '#deactivebtn', function(event) {
    if ( $('input[name=optionsRadios1]:checked', '#myForm').length>0 )  {
            var customer_id = obj.id;
        } else {
            alert('Need to select atlease one radio button');
            event.stopImmediatePropagation();
        }
    });
});

Upvotes: 0

anil
anil

Reputation: 156

The function will get called for both the radio buttons. So even if you check one radio button, for another radio button it'll go to else condition

And it is better to use value attribute of radio button for storing values rathar than id attribute

Upvotes: 0

dfsq
dfsq

Reputation: 193261

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

Demo: http://jsfiddle.net/3ppjfcLa/

Upvotes: 2

Related Questions