表格内的单选按钮

Posted 2023-03-05

【中文标题】表格内的单选按钮

【英文标题】：Radio button inside table

【发布时间】：2016-01-01 16:45:26

【问题描述】：

我有一组单选按钮放在表格里面，代码是这样的：

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

当我点击其中一个 Courier 单元格（例如 JNE）时，按钮被选中，现在我想在点击 Express Shipping 时也选中该按钮，我该怎么做？并且服务栏的垂直对齐与快递栏的高度不一样，如何解决？我使用引导程序。

【问题讨论】：

您需要一个复选框吗？

@ManojKumar - 我想当您再次阅读第一句话时，他会问他如何单击“快递运输”并选择快递单选框。这就是我的阅读方式，主要是因为 2 种运输类型的复选框听起来不正确。

face-palm :(你有一个有效的点@Jesse

我自己读了两遍，哈哈。我在下面的回答应该会有所帮助

@Jesse 删除了我的答案，但您也可以添加引导 css 并解决对齐问题vertical align of Service column doesn't have same high as Courier column，当您添加引导 css 时，您会看到文本不对齐。

【参考方案1】：

这可以使用label for来完成

查看以下代码并运行下面的sn-p ::

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

如您所见，您现在可以点击 Express Shipping 和 Regular Shipping 以根据要求选择单选按钮。

【讨论】：

谢谢你们，你们俩的合作很好:) ...它工作得很好:)

我只是想知道表单标签是否应该在表格之外。我不确定将标签放在表格中以进行正确标记是否正确，尽管我可能是错的。

@ThomasWilliams 表单标签肯定应该在 tbody 内的其他地方，但这样做不会造成任何问题。这最初是对原始问题代码的修改。如果是我的代码，我可能会将表单标签放在这个特定代码块中的表格之前。

是的，我通常这样做。谢谢，我只是想知道这是否会导致问题。

【参考方案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>

【参考方案3】：

使用此代码解决问题

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