Снимите флажки, если включена опция «Где угодно»

Question

Я хотел бы снять все флажки, кроме опции «В любой точке мира», если я выберу опцию «В любой точке мира» с помощью Angular. Я рассмотрел множество способов сделать это, но ни один из них не подходит моему решению. Какой самый простой способ сделать это?

<div class="form-row">
   <div class="col-md-12 mb-3">
       <label for="targetMarket" style="font-size: 17px">
           What is/are your current/proposed target market(s)?
       </label>
       <div class="form-check">
           <label class="checkbox-inline">
               <input type="checkbox" class="checkbox" name="southAsia" value="1" #southAsiaChk
                   (change)="onCheckArray($event, Form.value.targetMarket)">
                        South Asia
           </label>
       </div>
       <div class="form-check">
           <label class="checkbox-inline">
               <input type="checkbox" class="checkbox" name="northAsia" value="2" #northAsiaChk
                   (change)="onCheckArray($event, Form.value.targetMarket)">
                        North Asia
           </label>
       </div>
       <div class="form-check">
           <label class="checkbox-inline">
               <input type="checkbox" class="checkbox" name="oceania" value="3" #oceaniaChk
                   (change)="onCheckArray($event, Form.value.targetMarket)">
                        Australia/New Zealand
           </label>
        </div>
        <div class="form-check">
            <label class="checkbox-inline">
                <input type="checkbox" id="anywhere" class="checkbox" name="anywhere" value="9" #anywhereChk
                    (change)="onCheckArray($event, Form.value.targetMarket)" (click)="uncheckRegions()">
                        Anywhere in the world
            </label>
         </div>
    </div>
</div>

Answer 1

Есть два вида пути:

Сначала добавляется state и используется [(ngModel)] для обновления состояния флажка.

Демо (я не делаю новую, а использую одну из существующих демонстраций, которую я улучшил)

Код:

this.data.forEach(x => { x.state = ev.target.checked; });

обратите внимание, что this.data - это массив, который содержит привязку состояния к [(ngModel)] [(ngModel)]="content.state" в примере.

Второй обнаруживает вручную:

Демо

И то, и другое почти одно и то же: проверять или снимать все. Разница в том, что я добавляю условие, чтобы где-нибудь быть исключенным из проверки. Что вы могли бы легко реализовать, если бы использовали первый способ.

Код:

const input = document.getElementsByTagName('input');
Array.from(input).forEach(res => {
  if (res.type == 'checkbox') {
    if (res.attributes[2].value != 'anywhere') {
      res.checked = false;
    }
  }
})

---

Обновление:

Чтобы предотвратить снятие отметки, когда где-либо не отмечено, вы можете использовать ViewChild, чтобы получить в любом месте проверенное состояние: @ViewChild('anywhereChk') anywhere;

затем добавьте дополнительное условие:

if (res.attributes[2].value != 'anywhere' && this.anywhere.nativeElement.checked==true) {
    res.checked = false;
}

Демо