Question

Checkboxes表单中的

HTML没有隐含的标签。在其旁边添加显式标签（某些文字）不会切换checkbox。

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

Answer 1

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

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

label元素上的 for 属性链接到输入元素上的 id 属性，浏览器完成剩下的工作。

这一直在测试：

IE6
IE7
火狐

Answer 2

将标签的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>

Answer 3

正如@Gatekiller和其他人所指出的，正确的解决方案是＆lt; label＆gt;标签

点击文字很不错，但使用＆lt; label＆gt;还有另一个原因。 tag：可访问性。视障人士用来访问网络的工具需要＆lt;标签＆gt;来读出复选框和单选按钮的含义。如果没有＆lt; label＆gt; s，他们必须根据周围的文字进行猜测，他们经常会弄错或者不得不放弃。

面对读取“请选择您的送货方式，收音机按钮1，收音机按钮2，收音机按钮3”的表单非常令人沮丧。

请注意，Web辅助功能是一个复杂的主题; ＆lt; label＆gt;是必要的步骤，但它们不足以保证在适用的情况下可访问或遵守政府法规。

Answer 4

罗尼，

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

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

Answer 5

您可以将复选框打包在标签中：

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

Answer 6

您只需将复选框包装在label标签中就像这样

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

FIDDLE

或者你也可以使用标签的为属性和你的复选框的 id ，如下所示

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

FIDDLE

Answer 7

这应该有效：

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

如果没有，请纠正我！

Answer 8

使用标签包装仍然不允许点击“框中的任何位置” - 仍然只是在文本上！这对我来说很重要：

<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有效地切换了两次。

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

8 个答案: