0

在我的 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)到每个项目以正确处理事件捕获，所以如果用户单击标签或整个项目，我会选择相关的复选框？

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

4

5 回答 5

2

为确保单击标签会切换复选框，请在标签内包含输入元素（如MDN中所述）：

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

如果您还希望标签填充锚元素，请按如下所示定义 CSS。使用此样式后，单击锚点将切换复选框。

.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;
}

请参阅此 stackblitz以获取演示。

于 2020-01-16T17:49:18.253 回答
1

如果您可以将所有复选框放在容器中，则可以在容器上设置单个click事件侦听器，并event.target为您提供单击的元素并previousElementSibling选择同级输入。

function doSomething() {
    const selectedInput = event.target.previousElementSibling;
    selectedInput.checked = selectedInput.checked? false : true;
}

但是，如果您将来有可能记录结构更改，例如，如果其他元素进入输入和标签之间，或者它们的顺序发生变化，那么同级选择器将失败。要解决此问题，您可以改用父选择器并选择其中的 chechbox 输入元素。

document.getElementById('container').addEventListener('click', doSomething);

function doSomething() {
    const selectedElement = event.target.parentElement.querySelector('input[type="checkbox"]');
    selectedElement.checked = selectedElement.checked? false:true;
}
<div id= 'container'>
  <span class="caption">RAM</span>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="4 GB">
          <label>4 GB</label>
      </div>
  </a>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="8 GB">
          <label>8 GB</label>
      </div>
  </a>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="16 GB">
          <label>16 GB</label>
      </div>
  </a>
</div>

于 2020-01-16T15:58:35.943 回答
0

首先，您应该使用 *ngFor 列出所有选项：

html:

<a class="item" *ngFor="let choice of checks; let i=index">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" [value]="choice.value" (change)="onCheckChange($event)">
        <label>{{choice.title}}</label>
    </div>
</a>

零件：

public checks: Array<choices> = [
  {title: '4 GB', value: '4'},
  {title: "8 GB", value: '8'},
  {title: "16 GB", value: '16'}
];

public onCheckChange(event) {
    // do some things here
}

此外，您应该使用 Reactive Forms 来验证您的选择： https ://angular.io/guide/reactive-forms

于 2020-01-16T15:48:57.357 回答
0

您必须创建一个布尔数组并将其绑定到您的复选框。

.ts 文件

  myArray: any[] = [
 {
      "size": "2GB",
      "value":false
    },
    {
      "size": "4GB",
      "value":false
    },
    {
      "size": "8GB",
      "value":false
    }
]

.html 文件

<div *ngFor="let data of myArray">
 <a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" [(ngModel)]="data.value" (ngModelChange)="changeHandler()">
        <label>{{data.size}}</label>
    </div>
 </a>
</div>

工作演示：链接

于 2020-01-16T15:53:11.417 回答
0

你可以这样做：

const ramOptions = [
  {
    id: 1,
    size: '4 GB'
  },
  {
    id: 2,
    size: '8 GB'
  },
  {
    id: 3,
    size: '16 GB'
  }
]

在html中：

<a class="item" *ngFor="let option of ramOptions">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" (change)="onSelect(option.id)">
        <label>{{option.size}}</label>
    </div>
</a>

如果在 .js/.ts 文件中，您可以创建一个接口来定义处理程序。就像：

onSelect(id: string) {
  ...
}
于 2020-01-16T15:57:55.520 回答