nút Đài phát thanh bên trong bảng

Question

Tôi có một nhóm các nút radio mà tôi đặt bên trong bảng, mã này là như thế này:

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

Khi tôi bấm vào một trong những tế bào Courier ví dụ JNE, nút được chọn, bây giờ tôi muốn nút được chọn quá khi tôi nhấp vào Express Shipping, làm thế nào tôi có thể làm cho nó? và cột dọc của cột Dịch vụ không có cùng cột cao như cột Chuyển phát nhanh, cách khắc phục? Tôi sử dụng bootstrap.

Answer 1

Điều này có thể được thực hiện bằng label for

Xem đoạn mã sau và chạy các đoạn mã dưới đây ::

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

Như bạn có thể thấy bây giờ bạn có thể bấm nhanh Vận Chuyển và Thường xuyên Giao hàng để chọn các nút radio theo yêu cầu.

Answer 2

Bạn có thể sử dụng jQuery để toàn bộ row sau đó có thể được chọn, không chỉ riêng biệt đầu vào hoặc nhãn. Xem ví dụ.

$('.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

Sử dụng Bộ luật này đối với vấn đề cố định

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