个人中心
gpt4 book ai didi

react实现复选框全选和反选组件效果

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章react实现复选框全选和反选组件效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了react实现复选框全选和反选组件的具体代码，供大家参考，具体内容如下 。

运行效果图如下:

react实现复选框全选和反选组件效果

代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React, { Component } from 'react' ;
import { withRouter } from 'react-router-dom' ;
// import Menu from '../menu/Menu.jsx';
class List extends Component {
  constructor () {
  super ();
  this .state = {
   title: '我是List的标题' ,
   content: '我是内容部分部分' ,
   chooseAll: false , // 全选标志
   inters: [ 'bsball' , 'ymball' , 'fbball' ], // 页面加载默认选中项
   intersAll: [ 'bsball' , 'ymball' , 'ppball' , 'fbball' ],
   fchoose: false // 正反选标志
  };
  }
  // 全选
  chooseAll (event) {
  let {checked, value} = event.target;
  let chooseAll = this .state.inters.length === 4 ? true : false ;
  let inters = [ 'bsball' , 'ymball' , 'ppball' , 'fbball' ];
  checked ? (
   this .setState({
   inters,
   chooseAll: checked
   })
  ) : (
   this .setState({
   inters: [],
   chooseAll: checked
   })
  );
  }
  // 点击复选框
  chooseInter (event) {
  let val = event.target.value;
  let checked = event.target.checked;
  let {inters} = this .state;
  // event.stopPropagation();
  // 选中复选框并且值不在数组里面
  if (checked && ! this .state.inters.includes(val)) {
   inters.push(val);
  } else {
   // 取消选中的选项
   inters = inters.filter(v => val !== v);
  }
  let chooseAll = inters.length === 4 ? true : false ;
  console.log(inters);
  this .setState({
   inters,
   chooseAll
  });
  }
  // 反选处理
  fchooseHandle (event) {
  let {checked, value} = event.target;
  let {inters, intersAll} = this .state;
  let chooseAll = this .state.inters.length === 4 ? true : false ;
  let arr = []; // 反选结果
  this .setState({
   fchoose: checked,
   chooseAll
  });
  intersAll.forEach(item => {
   if (!inters.includes(item)) {
   arr.push(item);
   }
  });
  this .setState({
   inters: arr
  });
  }
  componentWillMount () {
  let chooseAll = this .state.inters.length === 4 ? true : false ;
  this .setState({
   chooseAll
  });
  }
  render () {
  return (
   <div className= "list" >
   { /* <Menu /> */ }
   <h1>{ this .state.title}</h1>
   <p>{ this .state.content}</p>
   <p>
    <label>
    <input type= "checkbox" value= "bsball" checked={ this .state.fchoose} onClick={ this .fchooseHandle.bind( this )}/>{ this .state.fchoose ? '取消反选' : '反选' }
    </label>
    <label>
    <input type= "checkbox" value= "bsball" checked={ this .state.chooseAll} onClick={ this .chooseAll.bind( this )}/>{ this .state.chooseAll ? '取消全选' : '全选' }
    </label>
   </p>
   <p>
    <label>
    <input type= "checkbox" value= "bsball" checked={ this .state.inters.includes( 'bsball' )} onClick={ this .chooseInter.bind( this )}/>篮球
    </label>
    <label>
    <input type= "checkbox" value= "ymball" checked={ this .state.inters.includes( 'ymball' )} onClick={ this .chooseInter.bind( this )}/>羽毛球
    </label>
    <label>
    <input type= "checkbox" value= "ppball" checked={ this .state.inters.includes( 'ppball' )} onClick={ this .chooseInter.bind( this )}/>兵乓球
    </label>
    <label>
    <input type= "checkbox" value= "fbball" checked={ this .state.inters.includes( 'fbball' )} onClick={ this .chooseInter.bind( this )}/>足球
    </label>
   </p>
   </div>
  );
  }
}
export default withRouter(List);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/CodingNoob/article/details/88106500 。

最后此篇关于react实现复选框全选和反选组件效果的文章就讲到这里了,如果你想了解更多关于react实现复选框全选和反选组件效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： C++实现LeetCode(85.最大矩形)
文章推荐： Docker镜像的导入导出代码实例
文章推荐： docker下载镜像太慢的解决方案
文章推荐： C++实现LeetCode(82.移除有序链表中的重复项之二)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com