13

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.

6
  • Do you need a check box instead?
    – m4n0
    Oct 5, 2015 at 5:17
  • @ManojKumar - I think when you read that first sentence again he is asking how he can click "Express Shipping" and it select the radio box for express shipping. This is how I read it mainly because a checkbox for 2 types of shipping doesn't sound right.
    – Jesse
    Oct 5, 2015 at 5:25
  • face-palm :( you have a valid point @Jesse
    – Shehary
    Oct 5, 2015 at 5:28
  • I had to read it twice myself lol. My answer below should help
    – Jesse
    Oct 5, 2015 at 5:29
  • @Jesse deleting my answer, but you can add the bootstrap css and resolve that align issue too vertical align of Service column doesn't have same high as Courier column when you add the bootstrap css you will see text not align.
    – Shehary
    Oct 5, 2015 at 5:31

3 Answers 3

22

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.

4
  • Thank you guys, nice collaboration of you both :) ... its working perfectly :) Oct 5, 2015 at 22:20
  • I am just wondering if the form tags should be outside the table. I am not sure if it is right to put the tags inside the table for correct markup, although I could be wrong. Aug 8, 2017 at 9:57
  • @ThomasWilliams The form tags should definitely be somewhere else then inside the tbody but causes no issues doing so. This was originally a modification of the original questions code. If it was my code, I would likely place the form tag before the table in this specific code block.
    – Jesse
    Aug 8, 2017 at 14:23
  • Yes that is what I normally do. Thanks I just wondered if it might cause problems down the line. Aug 8, 2017 at 14:50
12

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>

0
0

Use this Code to fixed the issue

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.