Pulsante Radio all'interno tabella

Question

Ho un gruppo di pulsante di scelta che ho messo dentro da tavolo, il codice è simile a questo:

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

Quando clicco su una delle celle Courier per esempio JNE, è selezionato il pulsante, ora voglio che il pulsante sia selezionato anche quando clicco su Spedizione Express, come posso farlo? e l'allineamento verticale della colonna Servizio non ha la stessa altezza della colonna Courier, come risolverlo? Sto usando il bootstrap.

Answer 1

questo può essere realizzato utilizzando label for

Vedere il seguente codice ed eseguire il frammento di seguito ::

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

Come si può vedere si è ora in grado di fare clic esprime il trasporto e spedizione regolare per selezionare i pulsanti di opzione come richiesto.

Answer 2

È possibile utilizzare jQuery in modo che sia possibile selezionare l'intero row, non solo l'input o l'etichetta separatamente. Vedi esempio.

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

utilizzare questo codice per risolto il problema

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