我需要有两列的表。每一行是一个单选按钮对。

例如:有问题和两个可能的答案是/否。

+------+------+
| yes  | no   | - 1.question
| yes  | no   | - 2.question
| yes  | no   | - 3.question
| yes  | no   | - 4.question
| yes  | no   | - 5.question
+------+------+

问题是我需要将单选按钮传播到整个单元格。如果有人想选择选项,只针对文本是不舒服的......如何做到这一点
<table>
  <tr>
    <td>
      <input type="radio" name="first">yes</radio>
    </td>
    <td>
      <input type="radio" name="first">no</radio>
    </td>
    <td>
      1.Question
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="second">yes</radio>
    </td>
    <td>
      <input type="radio" name="second">no</radio>
    </td>
    <td>
      2.Question
    </td>
  </tr>...
</table>

最佳答案

您的 HTML 存在一个问题:您没有为 input 元素指定 name 属性。请记住,如果您正在执行此操作,请使用 no data will be sent,因为表单数据根本没有片段标识符。

OP 似乎已经解决了缺少 name 属性的问题。

使用 <label for="..."> 通过 id 在表格单元格中定位每个单选按钮,并将其设置为块级元素,使其填满单元格中的整个空间。示例标记:

label {
    cursor: pointer;
    display: block;
    text-align: center;
}
<table>
  <tr>
    <td><label for="q1-y"><input type="radio" name="q1" id="q1-y" value="yes" />Yes</label></td>
    <td><label for="q1-n"><input type="radio" name="q1" id="q1-n" value="no" />No</label></td>
    <td>Question 1</td>
  </tr>
</table>


在此处查看概念验证演示:http://jsfiddle.net/teddyrised/zrjy29bw/

关于html - 在表格单元格内展开单选按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26390079/

10-11 23:06
查看更多