单选按钮表

内我有一组单选按钮，我把内部表，该代码是这样的：单选按钮表

<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信使单元的一个，当选择该按钮时，现在我想要点击Express Shipping时也选中该按钮，我该如何制作它？并且Service列的垂直对齐与Courier列没有相同的高度，请问如何解决？我使用引导。

来源

2015-10-05 Bayu Anggara

你需要一个复选框呢？ –

@ManojKumar - 我想当你再读第一句话时，他会问他如何点击“快递送货”，并选择快递送货的收件箱。这是我阅读它的主要原因，因为两种运输类型的复选框听起来不对。 – Jesse

face-palm :(你有一个有效的点@Jesse – Shehary

这可以通过使用label for

请看下面的代码，并运行如下::

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

片断正如你可以看到你现在可以点击快递运输来完成和定期运送按要求选择单选按钮。

来源

2015-10-05 05:17:59 Jesse

谢谢你们，你们两人的友好合作:) ...它的工作完美:) –

我只是想知道如果表格标签应该在表外。我不确定将标记放在表格中是否正确，但我可能是错的。 –

@ThomasWilliams窗体标签应该肯定在其他地方然后在tbody内，但不会导致这样做。这原本是对原始问题代码的修改。如果是我的代码，我可能会将表单标签放在此特定代码块中的表格之前。 – Jesse

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

来源

2015-10-05 05:53:14 vanburen

不错，谢谢:) –

使用此代码解决了该问题

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

来源

2016-10-27 11:26:29

回答

相关问题