分享一个关于 <label> 标签的用法

var me=this;2023年3月15日 00:26

## 分享一个关于 `<label>` 标签的用法 label 可以将自身接收到的 `click` 传递给与之绑定的元素，这个用处可能认真看过文档的人或老前端都会了解，但我是前不久才发现的，之前我以为它只是用于简单的信息描述。 ## 1. label 包裹 `<input>` <label> 点我这段文字就是在 toggle input<input type="checkbox"/></label> ## 2. `for` 属性指代还可以在 for 属性中指定一个 id，这样点击 label 时，就会触发对应的元素。 <input type="checkbox" id="style" />

点 💅 就是 toggle input

我们之间隔着十万八千里也没关系

Lipsum

<label class="form-label" for="style"> 💅 </label> ![](/media/markdownx/7beedf06-41b9-4ce2-92d6-f3d85d60e268.png)

喜欢

只看楼主

tobeyouth2023年3月17日 08:07

> for 可以指定元素 ID 这个用法可以在 drc 中看到

欧醚3.0.1-alpha.22023年3月28日 23:28

来这里吐槽一下刚才看到的不懂这一点的人写出来的奇妙代码

欧醚3.0.1-alpha.22023年3月28日 23:29

诶怎么看起来可以粘图片但是实际没了

欧醚3.0.1-alpha.22023年3月28日 23:29

```javascript var target = $(event.target || event.srcElement) if (target.is('label')) { var input = target.prev('input') $(input).toggleClass('checked') } ```

欧醚3.0.1-alpha.22023年3月28日 23:48

而且注意这里是`.toggleClass('checked')`

poisson2025年1月19日 22:52

还在用 JQuery 真是妙上加妙了。

分享一个关于 <label> 标签的用法

评论 (6)