题
Checkboxes
在 HTML
形式没有隐含的 标签 跟他们。在其旁边添加显式标签(某些文本)不会切换 checkbox
.
如何通过单击文本标签来切换复选框?
解决方案
设置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>
其他提示
如果您正确标记了 HTML 代码,则不需要 JavaScript。以下代码将允许用户单击标签文本来勾选复选框。
<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />
这 为了 标签元素上的属性链接到 ID 输入元素上的属性,浏览器完成其余的工作。
这已经过测试,可以在以下环境中使用:
- IE6
- IE7
- 火狐浏览器
正如@Gatekiller 和其他人所指出的,正确的解决方案是 <label> 标签。
点击文本固然不错,但使用 <label> 标签还有另一个原因:可达性。视障人士用来访问网络的工具需要 <label> 来读出复选框和单选按钮的含义。如果没有 <label>,他们必须根据周围的文本进行猜测,并且经常会出错或不得不放弃。
面对这样的表格是非常令人沮丧的 “请选择您的运送方式,radio-button1、radio-button2、radio-button3”。
请注意,网络可访问性是一个复杂的主题;<label> 是必要的步骤,但不足以保证可访问性或遵守适用的政府法规。
罗尼,
如果您想将标签文本和复选框包含在包装元素内,您可以执行以下操作:
<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
您可以将复选框包裹在标签中:
<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
<input type="checkbox" name="surname">
</label>
这应该有效:
<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>
如果没有,请纠正我!
使用标签换行仍然不允许单击“框中的任何位置” - 仍然只能在文本上!这对我来说是有效的:
<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 有效地切换了两次。
不隶属于 StackOverflow