我如何通过单击文本标签来切换复选框？

Question

Checkboxes 在 HTML 表单中没有隐式 _标签_。在其旁边添加明确的标签（一些文本）不会切换 checkbox 。

我如何通过单击文本标签来切换复选框？

原文由 Ronnie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将标签的 CSS display 属性设置为块元素，并使用它代替你的 div - 它保留标签的语义含义，同时允许你喜欢的任何样式。

例如：

 label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}

 <label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

原文由 Mat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您正确标记了 HTML 代码，则不需要 javascript。以下代码将允许用户单击标签文本以勾选复选框。

 <label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

label 元素上的 for 属性链接到 input 元素上的 id 属性，剩下的由浏览器完成。

这一直在测试工作：

• IE6
• IE7
• 火狐

原文由 GateKiller 发布，翻译遵循 CC BY-SA 2.5 许可协议