使表格单元格充当单选按钮

发布于 2025-01-14 17:39:48 字数 1105 浏览 1 评论 0原文

我有一个输入，用户可以选择两个文本字符串之一，这两个文本字符串在表格中彼此相邻显示。目前下面有单选按钮，但我想将这两个功能结合起来，以便用户可以单击文本本身进行选择。

<table>
<tbody>
  <tr>
    <td><div><b>Text A</b></div></td>
    <td><div><b>Text B</b></div></td>
  </tr>
<tr>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<div>Text example</div>
</td>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<div>Here is some even longer text</div>
</td>
</tr>
<tr>
<td style="height: 50px; text-align: center; padding-top: 20;"><label> <input class="form-check" name="selection" type="radio" value="A" /> </label></td>
<td style="height: 50px; text-align: center; padding-top: 20;"><label> <input class="form-check" name="selection" type="radio" value="A" /> </label></td>
</tr>
</tbody>
</table>

原文

I have an input where users select one of two text strings which are displayed next to each other in a table. Currently there are radio buttons underneath, but I want to combine both functions so users can click the text itself to select.

<table>
<tbody>
  <tr>
    <td><div><b>Text A</b></div></td>
    <td><div><b>Text B</b></div></td>
  </tr>
<tr>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<div>Text example</div>
</td>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<div>Here is some even longer text</div>
</td>
</tr>
<tr>
<td style="height: 50px; text-align: center; padding-top: 20;"><label> <input class="form-check" name="selection" type="radio" value="A" /> </label></td>
<td style="height: 50px; text-align: center; padding-top: 20;"><label> <input class="form-check" name="selection" type="radio" value="A" /> </label></td>
</tr>
</tbody>
</table>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

提赋 2025-01-21 17:39:48

这就是标签的用途。您的单选按钮周围有标签，但其中没有任何文本，它们的作用并不大。您可以改为将标签移动到文本单元格并将 for 属性设置为单选 ID。

<table>
<tbody>
  <tr>
    <td><div><b>Text A</b></div></td>
    <td><div><b>Text B</b></div></td>
  </tr>
<tr>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<label for="input1">Text example</label>
</td>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<label for="input2">Here is some even longer text</label>
</td>
</tr>
<tr>
<td style="height: 50px; text-align: center; padding-top: 20;"><input id="input1" class="form-check" name="selection" type="radio" value="A" /></td>
<td style="height: 50px; text-align: center; padding-top: 20;"><input id="input2" class="form-check" name="selection" type="radio" value="A" /> </td>
</tr>
</tbody>
</table>

This is what labels are used for. You have labels wrapped around your radio buttons but without any text in them they aren't doing very much. You can instead move the labels to the text cells and set the for attribute to the radio id.

<table>
<tbody>
  <tr>
    <td><div><b>Text A</b></div></td>
    <td><div><b>Text B</b></div></td>
  </tr>
<tr>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<label for="input1">Text example</label>
</td>
<td style="width: 50%; border: 2px solid #000000; padding: 1em; border-radius: 0.5em; vertical-align: top;">
<label for="input2">Here is some even longer text</label>
</td>
</tr>
<tr>
<td style="height: 50px; text-align: center; padding-top: 20;"><input id="input1" class="form-check" name="selection" type="radio" value="A" /></td>
<td style="height: 50px; text-align: center; padding-top: 20;"><input id="input2" class="form-check" name="selection" type="radio" value="A" /> </td>
</tr>
</tbody>
</table>

回复收藏 0 原文

~没有更多了~