Radio button inside the table

Question

I have a group of radio buttons that I put inside the table, the code looks like this:

<table class="table table-responsive"> <thead> <tr> <th>Courier</th> <th>Service</th> </tr> </thead> <tbody> <form> <tr> <td> <div class="radio"> <label><input type="radio" name="optradio">TIKI</label> </div> </td> <td> Regular Shipping </td> </tr> <tr> <td> <div class="radio"> <label><input type="radio" name="optradio">JNE</label> </div> </td> <td> Express Shipping </td> </tr> </form> </tbody> </table> 

When I click on one of the Courier cells, for example JNE, the button is selected, now I want the button to be selected when I click Express Express, how can I do it? and the vertical alignment of the Service column is not as high as the Courier column, how can I fix it? I am using bootstrap.

Answer 1

This can be done using the label for

See the following code and run the screenshot below:

 .radiotext { margin: 10px 10px 0px 0px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <table class="table table-responsive"> <thead> <tr> <th>Courier</th> <th>Service</th> </tr> </thead> <tbody> <form> <tr> <td> <div class="radio"> <label><input type="radio" id='regular' name="optradio">TIKI</label> </div> </td> <td> <div class="radiotext"> <label for='regular'>Regular Shipping</label> </div> </td> </tr> <tr> <td> <div class="radio"> <label><input type="radio" id='express' name="optradio">JNE</label> </div> </td> <td> <div class="radiotext"> <label for='express'>Express Shipping</label> </div> </td> </tr> </form> </tbody> </table> 

As you can see, now you can click Express Delivery and Normal Delivery to select the radio buttons according to your request.

Answer 2

You can use jQuery so that the entire row selected, not just the input or label separately. See an example.

 $('.table tbody tr').click(function(event) { if (event.target.type !== 'radio') { $(':radio', this).trigger('click'); } }); 

 .table-responsive tbody tr { cursor: pointer; } .table-responsive .table thead tr th { padding-top: 15px; padding-bottom: 15px; } .table-responsive .table tbody tr td { padding-top: 15px; padding-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>Courier</th> <th>Service</th> </tr> </thead> <tbody> <tr> <td> <input type="radio" name="radios" id="radio1" /> <label for="radio1">TIKI</label> </td> <td>Regular Shipping</td> </tr> <tr> <td> <input type="radio" name="radios" id="radio2" /> <label for="radio2">JNE</label> </td> <td>Express Shipping</td> </tr> </tbody> </table> </div> 

Answer 3

Use this code to fix the problem.

  $('.table tbody tr td').click(function (event) { if (event.target.type !== 'radio') { $(':radio', this).trigger('click'); } });