Html 表格内的单选按钮

Radio button inside table

提问by Bayu Anggara

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.

当我单击一个 Courier 单元格（例如 JNE）时，该按钮被选中，现在我想在单击 Express Shipping 时也选择该按钮，我该如何制作？并且 Service 列的垂直对齐与 Courier 列的高度不同，如何解决？我使用引导程序。

回答by Jesse

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.

如您所见，您现在可以单击“Express Shipping”和“Regular Shipping”以根据要求选择单选按钮。

回答by vanburen

You can use jQuery so the entire rowis then able to be selected, not just the input or label separately. See example.

您可以使用 jQuery，这样row就可以选择整个，而不仅仅是单独的输入或标签。参见示例。

$('.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>

回答by Rohit K Dhiman

Use this Code to fixed the issue

使用此代码解决问题

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