javascript - Angular 点击事件: how to select a checkbox within an a element?

Question

在我的 Angular 应用程序中，我有以下菜单:

如您所见，我有一些项目(即 a 元素)以及每个项目中的一个复选框和一个标签:

<span class="caption">RAM</span>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>4 GB</label>
    </div>
</a>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>8 GB</label>
    </div>
</a>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>16 GB</label>
    </div>
</a>

我应该如何向每个项目添加(click)以正确处理事件捕获，以便如果用户单击标签或整个项目，我会选中相关的复选框？

...或者你知道更好的方法来达到我的意思吗？

Answer 1

要确保单击标签会切换复选框，请将输入元素包含在标签内(如 MDN 中所述):

<a class="sub-item item">
  <div class="item-checkbox">
    <label><input type="checkbox" tabindex="0" class="hidden">4 GB</label>
  </div>
</a>

如果您还希望标签填充 anchor 元素，请定义 CSS，如下所示。设置好此样式后，单击 anchor 将切换复选框。

.ui.secondary.menu a.item {
  padding: 0px;
}

div.item-checkbox {
  width: 100%;
  height: 100%;
}

div.item-checkbox > label {
  display: block;
  padding: .78571429em .92857143em;
}

div.item-checkbox > label > input {
  margin-right: 0.25rem;
}

参见this stackblitz进行演示。