表内的单选按钮

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时，按钮被选中，现在我想在单击快速运输时也选择该按钮，我该如何制作呢？并且服务列的垂直对齐与Courier列没有相同的高度，如何解决？我使用bootstrap。

Answer 1

这可以使用label for

来完成

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

＆＃13;

＆＃13;

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

＆＃13;

<div id="wtf" style="margin-top:5%; display:block; float:left; width:auto; height:auto; background:whitesmoke;">
                          <div style="width:33%;">
                              <div class="block">
       some content    

                              </div>
                              </div>


                          <div style="float:left; width:33%;">
                                <div class="block">
some content                   

                                </div></div>




                               <div style="float:left; width:33%;">
                                <div class="block">
       some content       


                                </div></div> 



                          </div>

＆＃13;

＆＃13;

＆＃13;

如您所见，您现在可以点击快递和常规送货，按要求选择单选按钮。

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');
        }
    });