表格内的单选按钮

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>

当我点击快递单元格的时候，例如JNE，按钮被选中了，现在我想当我点击快递的时候，按钮也被选中了，我该怎么做呢？服务栏目的垂直对齐没有快递栏目的高度，该如何解决？我使用bootstrap。

Answer 1

这可以使用label for来完成

请参阅以下代码并运行以下代码片段：

​

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

​

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

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>

​

Answer 3

使用此代码修复此问题

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