react 全选_react实现全选、取消全选和个别选择

react里面实现全选和取消全选，个别选择等操作，效果如下

代码：

import React, {Component} from 'react'

export default class Demo extends React.Component{

constructor(props,context){

super(props,context);

this.state = {

checklist:[

{name:'全选',checked:false},

{name:'张三',checked:false},

{name:'李四',checked:false},

{name:'王五',checked:false},

]

}

render(){

let _self = this;

return (

这是全选取消全选的demo

{

this.state.checklist.length?

this.state.checklist.map(function(item,index){

return

{item.name}

})

:''

}

)

}

checkThis(item){

item.checked = !item.checked;

if(item.name==='全选'){ // 如果点击的是全选，就把所有的选中或全部取消勾选

if(item.checked){

this.state.checklist.forEach(i=>{

i.checked = true;

})

}else{

this.state.checklist.forEach(i=>{

i.checked = false;

})

}

// 如果全选之后，取消勾选其中的一个或多个，则会把全选也取消勾选掉

let result = this.state.checklist.some(j=>{

if(!j.checked){

return true;

}

})

if(result){

this.state.checklist[0].checked = false;

}

let len = this.state.checklist.length

let ev = true;

for(let a=1;a

if(!this.state.checklist[a].checked){

ev = false;

}

if(ev){

this.state.checklist[0].checked = true;

}

this.setState({ // 每点击一次更新状态

checklist:this.state.checklist

})

} }

若有更优化的方案，欢迎提出~

Jquery CheckBox复选框全选/取消全选最佳实现方式参考案例

全选/取消全选

react 全选_react实现全选、取消全选和个别选择相关推荐

在项目中学习.NET的JQuery CheckBox方法(全选、取消全选、其他）
一.在项目中遇到的CheckBox的全选和取消全选以及其他等解决方案如下: // 对全选和取消全选的事件 $("#CheckAll").click(function () { ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
jquery实现复选框checkbox全选，取消全选
jsp中checkbox复选框的个数是依据从数据库中取出值的条数决定的,是Iterator循环遍历出来的. <td class="rd8"> <input typ ...
表单全选取消全选案例
表单全选取消全选案例要求: 点击上面全选复选框 , 下面所有的复选框都选中(全选) 再次点击全选复选框 , 下面所有的复选框都不选中(取消全选) 如果下面复选框全部选中 , 上面全选按钮自动选中如 ...
axure实现复选框全选_Axure RP实例教程：全选与取消全选效果
原标题:Axure RP实例教程:全选与取消全选效果 Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图.流程图.原型和规格的设计制作,从低到高的视觉和交 ...
C#窗体程序实现全屏及取消全屏步骤
这篇文章主要介绍了C#窗体程序实现全屏及取消全屏步骤,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧由于项目需要,需要用vs窗体程序实现播放视频的窗口的全屏和取消全屏. 具体实现界面 ...
react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...
DataGrid 的全选/取消全选控制(CheckBox)
DataGrid控件: <Columns> <asp:TemplateColumn> <HeaderStyle Width=" ...
jquery全选/取消全选(反选)/单选操作
使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body><div& ...

react 全选_react实现全选、取消全选和个别选择

react 全选_react实现全选、取消全选和个别选择相关推荐

最新文章

热门文章