43

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

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

4

8 回答 8

51

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

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

label 元素上的for属性链接到 input 元素上的id属性,其余的由浏览器完成。

这一直在测试工作:

  • IE6
  • IE7
  • 火狐
于 2008-08-05T12:00:03.367 回答
26

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

例如:

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

于 2008-08-05T12:52:50.047 回答
4

罗尼,

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

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
于 2008-08-05T12:28:32.623 回答
4

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

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

面对一个显示“请选择您的运输方式,radio-button1,radio-button2,radio-button3”的表格是非常令人沮丧的。

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

于 2008-08-25T15:21:39.787 回答
2

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

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
于 2008-08-05T12:25:16.607 回答
2

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

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

小提琴

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

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

小提琴

于 2015-09-01T12:10:03.947 回答
-1

这应该工作:

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

如果没有,请纠正我!

于 2015-03-09T12:13:34.150 回答
-2

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

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

于 2008-08-05T12:34:27.947 回答