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

Posted 2021-02-11

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 (
            <div className="ToDo">
                <div>这是全选取消全选的demo</div>

                {
                    this.state.checklist.length?
                    this.state.checklist.map(function(item,index){
                        return <div key={index}>
                        <label><input type="checkbox" onChange={_self.checkThis.bind(_self,item)} checked={item.checked}/>{item.name}</label>
                        </div>
                    })
                    :\'\'
                }
                
            </div>
        )
    }
    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<len;a++){ // 遍历，如果列表里除了第一个之外，其他的都勾选的话，就把全选按钮也勾选掉
            if(!this.state.checklist[a].checked){
                ev = false;
            }
        }
        if(ev){
            this.state.checklist[0].checked = true;
        }
　　　　　　

　　　　this.setState({ // 每点击一次更新状态
            checklist:this.state.checklist
        })

}  } 

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