如何通过单击父 <label> 元素来获取输入字段的状态？

Posted 2023-05-08

【中文标题】如何通过单击父 <label> 元素来获取输入字段的状态？

【英文标题】：How to get state of input field by clicking at parent <label> element?

【发布时间】：2019-10-14 16:31:51

【问题描述】：

我在带有 bootstrap 4 和 Angular 7 的 html 中的标签标签内有一个输入复选框字段。我在单击输入复选框时调用一个函数并将其状态“($event.target.checked)”作为其中之一传递论据。但我收到的只是“未定义”。另一方面，如果我直接从 input:checkbox 调用该函数，即没有标记 ass 父元素，那么它工作得很好。但我需要前一个选项才能工作。

案例 1： ">div>

label (click)="onChange('father', $event.target.checked, 'diabetes')" class="btn btn-sm rounded-pill position-relative mb-2 mx-2"> input type="checkbox" name="diabetes" autocomplete="off"> 父亲 /标签 "

案例 2： ">div>

input type="checkbox" (click)="onChange('father', $event.target.checked, 'diabetes')" name="" id="">Father /div>"

当我在我的函数中同时控制上述两种情况时，我在输入字段之外收到带有标签的第一种情况下的未定义，并且它在没有标签的情况下工作得很好，如案例 2 所示，并提供真假作为结果。任何人都可以帮助我在案例 1 中获得真假值。

【问题讨论】：

请也添加您的代码。

@randomSoul 添加了代码.. 立即检查

@AkshatSharma 使用for 属性来合并标签和复选框，像这样 Demo 跨度>

试过了..还是不行..当我在 input:checkbox 上应用点击事件并使用标签时，事件甚至没有被触发..就像我无法点击一样输入字段..仅单击我无法访问输入复选框状态的标签标签

检查这个链接..我希望我的代码像这样运行..但由于某种原因它没有..***.com/a/24596641/8247912

【参考方案1】：

那是因为您在复选框上听到点击事件。

Intsead，你应该听(change)事件：

(change)="onChange('father', $event, 'diabetes')" 

这样，每次复选框的值更改时都会调用该函数。

【讨论】：

我在标签标签上调用了点击事件，以防万一我无法访问输入字段的状态，因为它是标签标签的子标签。如果我在案例 1 中对输入字段应用点击事件或更改事件，则该事件甚至不会被触发。

你看我的回答了吗？你不使用click事件，你使用change事件。

是的，我确实阅读了您的回复.. 我将同样的内容应用到我的代码中.. 它仍然无法正常工作...甚至根本没有触发该事件..

因为您的标签应该具有for="checkboxID" 属性以将它们绑定到复选框。

当我们在标签内使用输入字段时，我们不需要使用属性..标签标签已经与输入字段连接..我仍然尝试了你的方法..没有工作