选中 Angular/JavaScript 中的所有复选框答案

【问题标题】：Select all checkboxes in Angular/ JavaScript选中 Angular/JavaScript 中的所有复选框
【发布时间】：2021-04-05 13:29:46
【问题描述】：

我想选择 Angular/JavaScript 中的所有复选框，我尝试了一些不起作用的方法。

全选的校验码就是这个：

<div class="form-groupCheckbox">
    <input class="checkbox" name="confirm" id="confirm1" type="checkbox">
    <label for="confirm1">  Selecionar todos  </label>
  </div>

当我点击“全选”框时，我想在此处选中所有这些框

      <input class="checkbox" name="confirm" id="confirm1" type="checkbox">
      <label for="confirm1"> xx </label>


      <input class="checkbox" name="confirm" id="confirm2" type="checkbox">
      <label for="confirm1"> ff </label>

      <input class="checkbox" name="confirm" id="confirm3" type="checkbox">
      <label for="confirm1">rr </label>

【问题讨论】：

您能否向我们展示您编写并尝试在按下“全选”按钮时运行的代码？
当你使用 Angular 时，最好的做法是为你的复选框字段定义一个组件控制器，循环输出复选框，为“检查所有”功能添加一个方法。

标签： javascript angular angular-cli

【解决方案1】：

这是 javascript 的方法。更改主复选框 html 如下。

<div class="form-groupCheckbox">
    <input class="checkbox" name="confirmmain" onclick="selects()" id="confirmall" type="checkbox">
    <label for="confirm1">  Selecionar todos  </label>
  </div>

现在添加使复选框选中和取消选中的新脚本

<script>
       function selects(){  
       var ele=document.getElementById('confirmall');  
       if(ele.checked == true) {
        
                var ele=document.getElementsByName('confirm');  
                
                for(var i=0; i<ele.length; i++){  
                    if(ele[i].type=='checkbox')  
                        ele[i].checked=true;  
                }  
       } else {
       var ele=document.getElementsByName('confirm');  
                for(var i=0; i<ele.length; i++){  
                    if(ele[i].type=='checkbox')  
                        ele[i].checked=false;  
                      
                }  
                }
            }         
      </script>

【讨论】：

【解决方案2】：

您可以做的是将每个复选框链接到某个变量，然后当用户选择select-all checkbox 时将它们全部设为true。

HTML 文件将如下所示：

<div class="form-groupCheckbox">
    <input class="checkbox" name="confirm" id="confirm1" type="checkbox" #selectAll (change)="onSelectAllChange(selectAll.value)">
    <label for="confirm1">  Selecionar todos  </label>
</div>

<ng-container *ngFor="let checkbox of checkboxes">
  <input class="checkbox" name="confirm" [(ngModel)]="checkbox.value" id="{{checkbox.id}}" type="checkbox">
  <label for="confirm1"> {{checkbox.label}} </label>
</ng-container>

TypeScript 文件将如下所示：

public checkboxes = [
    {
      value: false,
      id: 'checkbox_1',
      lablel: 'Label 1'
    },
    {
      value: false,
      id: 'checkbox_2',
      lablel: 'Label 2'
    },
    {
      value: false,
      id: 'checkbox_3',
      lablel: 'Label 3'
    }
  ];

  onSelectAllChange(value: boolean) {
    checkboxes.forEach((checkbox: any) => {
      if (value) {
        checkbox.value = true;
      } else {
        checkbox.value = false;
      }
    });
  }

【讨论】：