Bayu Anggara Bayu Anggara - 1 month ago 6
HTML Question

Radio button inside table

I have a group of radio button that I put inside table, the code is 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 Courier cell for example JNE, the button is selected, now I want to the button is selected too when I click on Express Shipping, how can I make it ? and the vertical align of Service column doesn't have same high as Courier column, how to fix it ? I using bootstrap.

Answer

This can be accomplished using label for

See the following code and run the snippet 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 you are now able to click Express Shipping and Regular Shipping to select the radio buttons as requested.

Comments