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

How do I make a checkbox toggle from clicking on the text label as well?

提问by Ronnie

Checkboxesin HTMLforms don't have implicit labelswith them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.

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

How do I make a checkbox toggle from clicking on the text label as well?

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

采纳答案by Mat

Set the CSS displayproperty for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.

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

For example:

例如：

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

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

回答by GateKiller

If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.

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

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

The forattribute on the label element links to the idattribute on the input element and the browser does the rest.

在对标签上的元素链接到属性ID输入元素属性和浏览器没有休息。

This has been testing to work in:

这已被测试用于：

• IE6
• IE7
• Firefox

• IE6
• IE7
• 火狐

回答by Euro Micelli

As indicated by @Gatekiller and others, the correct solution is the <label> tag.

正如@Gatekiller 和其他人所指出的，正确的解决方案是 <label> 标签。

Click-in-the-text is nice, but there is another reason to use the <label> tag: accessibility. The tools that visually-impaired people use to access the web need the <label>s to read-out the meaning of checkboxes and radio buttons. Without <label>s, they have to guess based on surrounding text, and they often get it wrong or have to give up.

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

It is very frustrating to be faced with a form that reads "Please select your shipping method, radio-button1, radio-button2, radio-button3".

面对一个写着“请选择您的运输方式，radio-button1，radio-button2，radio-button3”的表单是非常令人沮丧的。

Note that web accessibility is a complex topic; <label>s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies.

请注意，网络可访问性是一个复杂的话题；<label> 是必要的步骤，但它们不足以保证可访问性或遵守适用的政府法规。

回答by GateKiller

Ronnie,

罗尼，

If you wanted to enclose the label text and checkbox inside a wrapper element, you could do the following:

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

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

回答by Michiel de Mare

You can wrap your checkbox in the label:

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

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

回答by Ajay Gupta

You need to just wrap the checkbox in label tag just like this

您只需要像这样将复选框包裹在标签标签中

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

FIDDLE

小提琴

or you can also use the forattribute of label and idof your checkbox like below

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

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

FIDDLE

小提琴

回答by The_HTML_Man

this should work:

这应该有效：

<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>

if it doesnt, pleae corect me!

如果没有，请纠正我！

回答by Ronnie

Wrapping with the label still doesn't allow clicking 'anywhere in the box' - still just on the text! This does the job for me:

用标签包装仍然不允许点击“框中的任何地方” - 仍然只是在文本上！这对我有用：

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

but unfortunately has lots of javascript that is effectively toggling twice.

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