html - 包裹其他元素有什么问题吗？

Question

我想让表格中的三个单元格在您单击它们时选中相应的复选框，因此我用标签标记将它们包装起来。

<table>
  <tr>
    <td>
      <input id="input_id" type="checkbox">
    </td>
    <label for='input_id'>
      <td>stuff</td>
      <td>stuff</td>
      <td>stuff</td>
    </label>
  </tr>
</table>

不幸的是，这破坏了点击功能。通常，当您单击标签中的文本时，它会切换检查，但这不适用于包装元素。任何想法为什么？应该这样做，还是出于某种原因这是一个坏主意？

有趣的是，如果我在具有相同“for”属性的单元格内容周围使用三个单独的标签，它确实有效......

Answer 1

根据您的示例编写无效标记是一个坏主意。应该包装 a 的唯一元素td是 a tr。

就目前而言，您的示例不会破坏点击功能，因为 td 标记将被解析器丢弃。

但是，如果示例位于 table 和 tr 元素内，则 input 和 label 元素将移至 table 之前，因此不会包装tds 或“stuff”文本（保留在 table 内） ，因此单击该文本将无效。