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

Translate

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

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

This question and all comments follow the "Attribution Required."

所有的回答

Mat
Translate

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

例如:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>
来源
Translate

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

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

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

经过测试可以在以下方面工作:

  • IE6
  • IE7
  • 火狐浏览器
来源
Translate

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

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

面对一个读起来很令人沮丧的表格“请选择运输方式,单选按钮1,单选按钮2,单选按钮3”。

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

来源
Translate

罗尼,

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

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

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

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

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

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

小提琴

来源
Translate

这应该工作:

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

如果没有的话,请求我!

来源
Translate

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

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

来源