时间戳

首页 > 解决方案 > 如果选中“任何地方”选项，则清除复选框

angular - 如果选中“任何地方”选项，则清除复选框

问题描述

如果我使用 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>

标签： angularcheckbox

解决方案

有两种方式：

第一个是添加一个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;
}

演示

推荐阅读