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复选框 全选/取消全选 最佳实现方式 参考案例

全选/取消全选