如何通过单击文本标签进行复选框切换? [英] How do I make a checkbox toggle from clicking on the text label as well?

问题描述

Checkboxes 没有隐含的标签.在它旁边添加一个明确的标签(一些文本)不会切换 checkbox.

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.

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

推荐答案

将标签的 CSS display 属性设置为块元素并使用它代替你的 div - 它保持语义标签，同时允许您喜欢任何样式.

Set the CSS display property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.

例如:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}

<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

这篇关于如何通过单击文本标签进行复选框切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！