如何通过点击文本标签来切换复选框?

Checkboxes in HTML forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.

如何通过点击文字标签来切换复选框?

0
额外 编辑
意见: 3
你能编辑原始问题吗?目前,最高评分答案是最好的问题,措辞。接受的答案实际上回答了问题的更新,并且我已经适当地进行了修改(在编辑之后将会反转)。
额外 作者 Bobby Jack,

8 答案

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

例如:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
</div> </div>
0
额外
最好将复选框放在标签外面。
额外 作者 MrFox,
@MrFox当使用display:block时,复选框必须位于标签内部 jsfiddle.net/Flandre/sBCLv/ 1
额外 作者 Andre,

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


0
额外

用标签包装仍然不允许点击“盒子中的任何地方” - 仍然在文本上! 这为我做了这份工作:

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

0
额外

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


<input type="checkbox" name="surname" id="surname" />

标签元素上的 for 属性链接到输入元素上的 id 属性,其余部分由浏览器完成。

这已经过测试,可用于:

  • IE6
  • IE7
  • 火狐
0
额外
如果您创建多个行都有复选框,那么这将不起作用,因为您必须为每个行提供相同的名称和标识,如下所示。
额外 作者 AndroidDev,

罗尼,

如果您想将标签文本和复选框放入包装元素中,可以执行以下操作:


0
额外

这应该工作:

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

如果它没有,pleae corect我!

0
额外
改进: box.checked =!check; 。避免重复,尽管可读性略微受损。
额外 作者 Rafael Campos Nunes,

As indicated by @Gatekiller and others, the correct solution is the

0
额外

您只需将复选框包装在标签标签中即可

 

FIDDLE

或者也可以使用下面的复选框的标签和 idfor 属性


<input type="checkbox" id="other" />

FIDDLE

0
额外