Question

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

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

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

Answer 1

~~HTML的一个问题：您没有为输入元素指定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/

在表格单元格内传播单选按钮

1 个答案: