web-dev-qa-db-fra.com

Bouton radio à l'intérieur de la table

J'ai un groupe de bouton radio que je mets à l'intérieur de la table, le code est comme ceci:

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

Lorsque je clique sur l'une des cellules Courier, par exemple JNE, le bouton est sélectionné; maintenant, je souhaite que le bouton soit également sélectionné lorsque je clique sur Livraison express, comment puis-je le créer? et l'alignement vertical de la colonne Service n'a pas la même hauteur que la colonne Courrier, comment y remédier? J'utilise bootstrap.

htmltwitter-bootstrapinputradio-buttonhtml-table
6
Bayu Anggara

Ceci peut être accompli en utilisant label pour

Voir le code suivant et lancez l'extrait ci-dessous ::

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

Comme vous pouvez le constater, vous pouvez désormais cliquer sur Expédition rapide et Livraison régulière pour sélectionner les boutons radio souhaités.

12
Jesse

Vous pouvez utiliser jQuery pour que la totalité de la row puisse ensuite être sélectionnée, pas seulement l'entrée ou le libellé séparément. Voir exemple.

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

8
vanburen

Utilisez ce code pour résoudre le problème

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