HTML表单中的Checkboxes没有隐式标签。在其旁边添加显式标签(一些文本)不会切换"复选框"。

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

解决方案

回答

如果我们正确标记了HTML代码，则无需使用javascript。以下代码将允许用户单击标签文本以选中复选框。

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

label元素上的for属性链接到input元素上的id属性，浏览器完成其余的工作。

这已经过测试，可以在以下环境中工作：

• IE6
• IE7
• 火狐浏览器

回答

我们可以将复选框包装在标签中：

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

回答

罗尼，

如果要将标签文本和复选框括在包装元素中，则可以执行以下操作：

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

回答

用标签包裹仍然不允许仅在文本上单击"框中的任何地方"！
这为我完成了工作：

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

但不幸的是，有很多javascript有效切换了两次。

回答

将标签的CSSdisplay属性设置为block元素，并使用它而不是div来保留标签的语义，同时允许我们喜欢的样式。

例如：

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

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

回答

如@Gatekiller等指出的，正确的解决方案是<label>标签。

单击文本很好，但是使用<label>标记还有另一个原因：可访问性。视障人士用来访问Web的工具需要<label>来读出复选框和单选按钮的含义。没有<label>的话，他们必须根据周围的文字来猜测，并且常常会弄错或者放弃。

看到显示"请选择运输方式，radio-button1，radio-button2，radio-button3"的表格，这非常令人沮丧。

请注意，Web可访问性是一个复杂的主题。 <label>是必需的步骤，但不足以保证可访问性或者遵守适用的政府法规。