表内的单选按钮

Question

我有一组单选按钮,我放在表中,代码是这样的:

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

当我单击Courier单元格中的一个例如JNE时,按钮被选中,现在我想要在按下快速运输时选择按钮,我该如何制作呢？并且Service列的垂直对齐与Courier列没有相同的高度,如何解决？我使用bootstrap.

Answer 1

这可以使用标签来完成

请参阅以下代码并运行以下代码段::

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

如您所见,您现在可以单击快速装运和常规装运以根据要求选择单选按钮.

Answer 2

您可以使用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>