單選按鈕表

內我有一組單選按鈕，我把內部表，該代碼是這樣的：單選按鈕表

<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

回答

相關問題