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

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为输入元素指定属性.请记住,如果您这样做,则不会发送任何数据,因为表单数据根本没有片段标识符.

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/