angular7 checkbox全选、反选、单选和多选
用angular7 写网页的时候，遇见了checkbox的坑，晚上着了很多都没有给出明确的实现方法，也看懵了，就自己写了一个，不多说了，直接上代码
首先设置变量
export class UserComponent implements OnInit {// 全选状态checkSum : boolean;// 数据check的状态数组userStatus: boolean[] = [];// 数据集合数组status: any[] = [];}
用status变量获取数组集合数据
import {Component, OnInit } from '@angular/core';import {HttpService } from '../../../common/service/http.service';@Component({selector: 'app-user',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class UserComponent implements OnInit {// 全选状态checkSum : boolean;// 数据check的状态数组userStatus: boolean[] = [];// 数据集合数组status: any[] = [];// 用于渲染数据userdata: any;constructor(private http: HttpService,) {}ngOnInit() {this.userInfo();}userInfo(pageSize, pageNo) {// 用get方法获取数据 看写的是什么方法了，post也行// 主要是获取数据，获取数据就不做讲解了this.http.getData().subscribe((response: any) => {if (response.code === 200 || response.ok) {// 获取数据this.userdata = response;// 获取Json里的数组数据this.status = response.data;} else {alert(response.message);return false;}});}
全选事件
checkAll() {// 全选框的状态this.checkSum = this.checkSum ? false : true;// 如果全选框状态为trueif (this.checkSum) {// 根据页面现实的数据长度，把全部数据的check状态赋值为truefor (let i = 0; i < this.status.length; i++) {// 给数据的复选框赋值truethis.userStatus[i] = true;}// 如果全选框状态不是true} else {// 根据页面当前的数据长度，把全部数据的checke状态赋值为falsefor (let i = 0; i < this.status.length; i++) {// 给数据的复选框赋值truethis.userStatus[i] = false;}}}
单选事件
checked(i) {// 根据当前i的顺序，判断check的状态this.userStatus[i] = this.userStatus[i] ? false : true;// 设定自加变量值，并初始化let k = 0;// 循环查看数据长度查看状态for (let j = 0; j < this.status.length; j++) {// 查看所有状态是否都等于trueif (this.userStatus[j] === true) {// 数据状态等于true，则自加变量k加1k++;if (k === this.status.length) {// 返回全选状态为truereturn this.checkSum = true;}}}}
反选事件
checkAllNo() {// 循环查看userStatus是否由false的状态for (let i = 0; i < this.status.length; i++ ) {// 如果userStatus有false的状态if (this.userStatus[i] === false) {// 更改全选框的状态this.checkSum = false;}}}
html界面
用angular7里的[(chencked)] 来获取状态false还是true
<div><div><input type="checkbox" [(checked)]="checkSum" (click)="checkAll()"></div><div>编号</div></div><div *ngFor="let item of userdata.data;let i = index"><div><input type="checkbox" [(checked)]="userStatus[i]" (click)="checked(i);checkAllNo()"></div><div>{{item.account}}</div></div>
ts里的完整代码
import {Component, OnInit } from '@angular/core';import {HttpService } from '../../../common/service/http.service';@Component({selector: 'app-user',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class UserComponent implements OnInit {// 全选状态checkSum : boolean;// 数据check的状态数组userStatus: boolean[] = [];// 数据集合数组status: any[] = [];// 用于渲染数据userdata: any;constructor(private http: HttpService,) {}ngOnInit() {this.userInfo();}userInfo(pageSize, pageNo) {// 用get方法获取数据 看写的是什么方法了，post也行// 主要是获取数据，获取数据就不做讲解了this.http.getData().subscribe((response: any) => {if (response.code === 200 || response.ok) {// 获取数据this.userdata = response;// 获取Json里的数组数据this.status = response.data;} else {alert(response.message);return false;}});}/*** check全选事件*/checkAll() {// 全选框的状态this.checkSum = this.checkSum ? false : true;// 如果全选框状态为trueif (this.checkSum) {// 根据页面现实的数据长度，把全部数据的check状态赋值为truefor (let i = 0; i < this.status.length; i++) {// 给数据的复选框赋值truethis.userStatus[i] = true;}// 如果全选框状态不是true} else {// 根据页面当前的数据长度，把全部数据的checke状态赋值为falsefor (let i = 0; i < this.status.length; i++) {// 给数据的复选框赋值truethis.userStatus[i] = false;}}}/*** check单选事件* @param i 当前位置*/checked(i) {// 根据当前i的顺序，判断check的状态this.userStatus[i] = this.userStatus[i] ? false : true;// 设定自加变量值，并初始化let k = 0;// 循环查看数据长度查看状态for (let j = 0; j < this.status.length; j++) {// 查看所有状态是否都等于trueif (this.userStatus[j] === true) {// 数据状态等于true，则自加变量k加1k++;// k+1是为了等于数组长度if ((k + 1) === this.status.length) {// 返回全选状态为truereturn this.checkSum = true;}}}}/*** 全选后，随意点掉一个复选框，全选框则被点掉*/checkAllNo() {// 循环查看userStatus是否由false的状态for (let i = 0; i < this.status.length; i++ ) {// 如果userStatus有false的状态if (this.userStatus[i] === false) {// 更改全选框的状态this.checkSum = false;}}}/*** 删除选取的N个id*/idsDelete() {let num = 0; // 为了存储ID，赋予ids数据位置const ids = []; // 选择事件后，给ids至空// 循环查看userStatus的状态for (let i = 0; i < this.status.length; i++) {// 如果userStatus[i]的状态为trueif (this.userStatus[i] === true) {// 则给ids赋值，赋值顺序根据numids[num] = this.status[i].id;// 每次赋值，num + 1num++;}}// 一下为访问接口什么的，没必要看了const data = {'ids': ids.toString()};const userIdsDelete = confirm('确认屏蔽以上' + num + '个会员？');if (userIdsDelete) {this.http.getData(data).subscribe((response: any) => {if (response.code === 200 || response.ok) {this.ngOnInit();} else {alert(response.message);return false;}});} else {return false;}}}
以上就是我写的，有问题或者不明白的的可以评论留言。
工作不忙的时候，回认真回复的。
不好请勿骂，谢谢。
转载的时候，请说明出处。
