Блог

Главная - Вопросы по программированию - Для установки только одного флажка за раз и выполнения определенной задачи при определенном установленном флажке или при снятии обоих флажков

Для установки только одного флажка за раз и выполнения определенной задачи при определенном установленном флажке или при снятии обоих флажков

#angular #typescript #checkbox

#angular #typescript #флажок

Вопрос:

У меня есть два флажка, и цель состоит в том, чтобы разрешить выбор только одного флажка за раз, в зависимости от выбора определенного флажка или в случае, если оба флажка не установлены. Я реализовал это и столкнулся с проблемой при выполнении задачи, когда один из флажков установлен или оба не установлены

 <div *ngFor="let chk of checkboxes">
<input type="checkbox" [checked]="chk.checked" 
(click)="uncheckOther(chk)"> {{chk.value}}
</div>

Код TS:

   checkboxes = [{ checked: false, value: 'Request' }, { checked: false, 
  value: 'Reservation' }];    

  uncheckOther(chk) {
   //uncheck all
   this.checkboxes.forEach(x => {
   if(x.checked == true)
   x.checked = false;
  })

  //check the selected
   if(chk.checked == true) {
   chk.checked = false; 
    } else {
   chk.checked = true;
   }
//Execute task if any one of the checkboxes are selected
   if(chk.value === "Request" amp;amp; chk.checked == true){
    console.log("call request data")
   } else if(chk.value === "Reservation" amp;amp; chk.checked == true){
    console.log("call Reservation data");
   }
//Execute task if none of them is checked
   this.checkboxes.forEach(x => {
   if(x.checked === false)
   console.log("call both combined data")
   })
   }

Одновременно должен быть установлен только один флажок, и некоторые задачи должны выполняться в зависимости от выбранного флажка или того, что оба флажка сняты, что также является случаем по умолчанию (или может быть снято пользователем)

Комментарии:

1. Требуется дополнительное объяснение

2. Что не работает?

3. Таким образом, по умолчанию при загрузке страницы флажки будут сняты, и у нас будут объединенные данные (запрос резервирование), когда пользователь нажимает на запрос (флажок), данные запроса будут доступны, во 2-м случае пользователь нажимает на резервирование (флажок) Будут доступны данные резервирования, 3-й случай, когда установлен любой из флажков, например: Запрос (флажок) и пользователь снимает флажок Запрос (флажок), затем снова должны быть доступны оба объединенных данные.

4. Итак, я столкнулся с проблемой получения правильных данных, связанных с флажком (код комментария к выполнению задачи). Либо один из них установлен, либо оба флажка сняты.

5. Нет, это то, что я написал, должно быть разрешено выбрать только один флажок, который работает, но выполнение задачи не работает.

Ответ №1:

Требуется несколько изменений:

HTML-код:

 <div *ngFor="let chk of checkboxes">
  <input type="checkbox" [(ngModel)]="chk.checked" (ngModelChange)="uncheckOther(chk,$event)"> 
  {{chk.value}}
</div>

Код TS:

 uncheckOther(chk, event) {

  if (event) {
    //uncheck all
    this.checkboxes.forEach(x => {
      if (x.checked == true)
        x.checked = false;
    })
    //check the selected
    if (chk.checked == true) {
      chk.checked = false;
    } else {
      chk.checked = true;
    }
    if (chk.value == "Request") {
      console.log('Call Request API')
    }
    else if (chk.value == "Reservation") {
      console.log('Call Reservation API')
    }
  }
  else {
    console.log('Call Both API')
  }
}

Working Demo