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


Checkboxes 在 HTML 表格没有隐含的 标签 跟他们。在其旁边添加显式标签(一些文本)不会切换 checkbox

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


30
2017-08-05 11:51


起源


你能编辑原始问题吗?目前,评价最高的答案对于这个问题是最好的,如措辞所示。接受的答案实际上回答了问题的更新,我已经适当地修改了(在编辑后会反转)。 - Bobby Jack


答案:


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


17
2017-08-05 12:52



最好将复选框放在标签之外。 - MrFox
@MrFox使用display:block时,复选框必须在标签内 jsfiddle.net/Flandre/sBCLv/1 - Andre


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

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

对于 label元素的属性链接到 ID 输入元素的属性和浏览器完成剩下的工作。

这一直在测试工作:

  • IE6
  • IE7
  • 火狐

43
2017-08-05 12:00



如果您要创建多个具有复选框的行,则无用,因为您必须为每个行指定相同的名称和ID,如此处所示。 - AndroidDev


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

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

面对一个阅读的表格是非常令人沮丧的 “请选择您的送货方式,单选按钮1,单选按钮2,单选按钮3”。

请注意,Web可访问性是一个复杂的主题; <label>是必要的步骤,但它们不足以保证在适用的情况下可访问性或遵守政府法规。


3
2017-08-25 15:21





罗尼,

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

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

2
2017-08-05 12:28





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

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

1
2017-08-05 12:25





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

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

小提琴

或者你也可以使用 对于 标签的属性和 ID 您的复选框如下所示

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

小提琴


0
2017-09-01 12:10





这应该工作:

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

如果它没有,请求我的核心!


-1
2018-03-09 12:13



改进: box.checked = !check;。避免重复,尽管可读性有点受损。 - Rafael Campos Nunes


使用标签包装仍然不允许点击“框中的任何位置” - 仍然只是在文本上! 这对我有用:

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


-2
2017-08-05 12:34