如何创建带有可点击标签的复选框？

  • Z时代
  • 2024-01-10
  • 分类：问答

如何创建带有可单击标签的HTML复选框（这意味着单击标签可以打开/关闭该复选框）？

回答：

回答：

将复选框包装在label标签内：

<label><input type="checkbox" name="checkbox" value="value">Text</label>

回答：

使用for属性（匹配复选框id）：

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

：ID在页面上必须是唯一的！

回答：

由于其他答案均未提及，因此标签最多可以包含1个输入并忽略该for属性，并且将假定该属性用于其中的输入。

w3.org的摘录（重点介绍）：

[for属性]显式地将要定义的标签与另一个控件相关联。如果存在，则此属性的值必须与同一文档中某些其他控件的id属性的值相同。

要将标签与另一个控件隐式关联， 。在这种情况下，LABEL只能包含

控制元素。标签本身可以位于相关控件之前或之后。

使用此方法具有以下优点for：

  • 无需将分配id给每个复选框（很棒！）。

  • 无需在中使用extra属性<label>。

  • 输入的可点击区域也是标签的可点击区域，因此没有两个单独的可控制复选框的地方可以单击-仅一个位置，无论<input>标签文本和实际标签文本有多远，无论您使用哪种CSS适用于它。

带有一些CSS的演示：

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block;
}
label:hover {
 background:#eee;
 cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

以上是 如何创建带有可点击标签的复选框？ 的全部内容， 来源链接： utcz.com/qa/413547.html

回到顶部