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

Question

Checkboxes在HTML表单中没有隐含的标签.在它旁边添加显式标签(一些文本)不会切换checkbox.

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

Answer 1

如果您正确标记HTML代码,则无需使用javascript.以下代码将允许用户单击标签文本以勾选复选框.

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

label元素的for属性链接到input元素的id属性,浏览器完成剩下的工作.

这一直在测试工作:

• IE6
• IE7
• 火狐

Answer 2

将display标签的CSS 属性设置为块元素并使用它而不是div - 它保留标签的语义含义,同时允许您喜欢的任何样式.

例如:

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

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