Question

在Angular中发出复选框！任何帮助将不胜感激：

html ：

<span for="check" tabindex="0" role="checkbox" (click)="inputCheck.click()" (keydown)="keyEvent()">
    <label for="check">checkbox</label>
    <input type="checkbox" style="display: none" id="check" (change)="changeEvent($event)" data-toggle="toggle" #inputCheck />
</span>

当我单击跨度（不是标签时，认为跨度看起来像是带有标签Checkbox的矩形），会出现单击事件，但是当我单击标签时，会出现2次单击事件它不充当复选框。

对此需要帮助。 我需要单击跨度/标签，我只需要单击一次事件即可使复选框处于选中状态。

预先感谢！

组件：

changeEvent(event) {
    console.log("change Event : " + event.target.checked);
}

clickEvent() {
    console.log("click Event");
}

keyEvent() {
    console.log("key event");
}

Answer 1

按如下所示构建HTML：-

<span for="check" tabindex="0" role="checkbox" (click)="inputCheck.click()" (keydown)="keyEvent()"></span>


<label for="check">checkbox</label>


<input type="checkbox" style="display: none" id="check" (change)="changeEvent($event)" data-toggle="toggle" #inputCheck />

在您的代码中，标签也按预期工作，然后click事件传播到span元素，因此也会触发。

因此，不必span包装标签/复选框元素

Answer 2

尝试这样：

basic example

HTML：

<span for="check" tabindex="0" role="checkbox" (click)="inputCheck.click()" (keydown)="keyEvent()">

<input type="checkbox" style="display: none" id="check" (change)="changeEvent($event)" data-toggle="toggle" #inputCheck />
</span>

<label for="check">checkbox</label>

带屏幕外输入标签的角度复选框

2 个答案: