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)]更新复选框的选中状态。

Demo（我不是在制作新的，而是使用我改进的现有演示之一）

代码：

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

请注意，在示例中，this.data是一个包含绑定到[(ngModel)] [(ngModel)]="content.state"的状态的数组。

第二个是手动检测：

Demo

两者几乎相同，即选中或取消选中所有内容。区别在于我添加了一个条件，使任何地方都可以取消选中。如果您使用第一种方法，也可以轻松实现。

代码：

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

Demo

如果选中了“任何地方”选项，请清除复选框

1 个答案: