Radio button inside table

Question

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 1

You can use jQuery so the entire row is then able to be selected, not just the input or label separately. See 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 2

This can be accomplished using label for

See the following code and run the snippet below ::

<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.