Angular событие клика: как установить флажок внутри элемента?

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>

Если вы также хотите, чтобы метка для заполнения элемента привязки, определите 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;
}

См. этот стек для демонстрации.

Answer 2

Если вы можете поместить все флажки в контейнере, вы можете установить один 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>

Answer 3

Вы должны создать логический массив и связать его со своими флажками.

.ts file

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

. html file

<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>

Рабочая демоверсия: ссылка

Answer 4

Вы можете сделать что-то подобное:

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) {
  ...
}

Answer 5

Прежде всего, вы должны использовать * 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
}

Кроме того, вы должны использовать Реактивные формы для подтверждения вашего выбора: https://angular.io/guide/reactive-forms