Question

如何选择角度6中的所有复选框？

我正在尝试制作带有复选框的表格，但是我无法设置一个复选框来检查每页中所有的复选框。我想选中所有复选框，但不能正常工作。

html

    <table id="myTable">
      <tbody >
            </tbody>
            <tbody >
              <tr >
                <th>
                  <input type=" checkbox" (change)="checkAll(this)">
        </th>
        <th>
          id
        </th>
        <th>
          fname
        </th>
       
        </tr>
      </tbody>
      <tbody *ngFor="let item of result" style="border:1px solid #D3D3D3">
        <td>
          <input type="checkbox" (change)="getCheckboxValues($event,item)" [checked]="check_true">
        </td>
        <td>
          {{ item.id }}
        </td>
        <td>
          {{ item.fname }}
        </td>
      </tbody>
    </table>

component.ts

       getCheckboxValues(ev, data) {
    let obj = {
      "order": data
    }
    let selected_rows = [];

    if (ev.target.checked) {
      // Pushing the object into array
      this.newArray.push(obj);
    } else {
      let el = this.newArray.find(itm => itm.order === data);

      if (el)
        this.newArray.splice(this.newArray.indexOf(el), 1);
      if (this.newArray.length == 0) {
        this.newArray = [];
      }
    }

    if (this.newArray.lenght > 0) {
      for (let i in this.newArray) {
        selected_rows.push(this.newArray[i].order.bulkid);

        this.selected_rows = selected_rows;
      }
    }
  }

  checkAll(ele) {

    var checkboxes = document.getElementsByTagName('input');
    if (ele.checked) {
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = true;
            }
        }
    } else {
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = false;
            }
        }
    }
    console.log(ele)
}

我正在尝试制作带有复选框的表格，但是我无法设置一个复选框来检查每页中所有的复选框。我想选中所有复选框，但不能正常工作。

Answer 1

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Angular 6 CheckBox Select/ Unselect All';
  masterSelected:boolean;
  checklist:any;
  checkedList:any;

  constructor(){
      this.masterSelected = false;
      this.checklist = [
        {id:1,value:'A',isSelected:false},
        {id:2,value:'B',isSelected:true},
        {id:3,value:'C',isSelected:true},
        {id:4,value:'D',isSelected:false},
        {id:5,value:'E',isSelected:false},
        {id:6,value:'F',isSelected:false},
        {id:7,value:'G',isSelected:false},
        {id:8,value:'H',isSelected:false}
      ];
  }

}

Answer 2

准备了一个小演示，以演示如何使用ngModel指令完成此操作。链接：https://stackblitz.com/edit/angular-lxjrdh

它使用Array.every检查是否全部选中。如果选中，它将重置所有，否则将全部选中。

如何选择角度6中的所有复选框？

2 个答案: