रेडियो बटन तालिका

Question

अंदर मुझे लगता है कि मैं तालिका के अंदर डाल रेडियो बटन के एक समूह है, कोड इस तरह है:

<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 के लिए कूरियर सेल में से एक पर क्लिक करें, बटन चयनित है, अब जब मैं एक्सप्रेस शिपिंग पर क्लिक करता हूं तो बटन भी चुनना चाहता हूं, मैं इसे कैसे बना सकता हूं? और सेवा कॉलम का लंबवत संरेखण कूरियर कॉलम के समान नहीं है, इसे कैसे ठीक किया जाए? मैं बूटस्ट्रैप का उपयोग कर रहा हूँ।

Answer 1

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

टुकड़ा चलाने क्या आप अब क्लिक करने के लिए एक्सप्रेस शिपिंग में सक्षम हैं देख सकते हैं पूरा किया जा सकता अनुरोध के अनुसार रेडियो बटन का चयन करने के लिए नियमित शिपिंग।

Answer 2

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

Answer 3

उपयोग समस्या का समाधान हो करने के लिए इस कोड

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