Checkbox全选/取消全选

最新推荐文章于 2023-06-27 21:22:39 发布

那么那么晴天依旧、

最新推荐文章于 2023-06-27 21:22:39 发布

阅读量750

点赞数 1

本文链接：https://blog.csdn.net/ONLY_jing_/article/details/84615896

版权

效果图：

接口数据格式：

data:[

{

id:**,name:**,

is_selected_all:0，

city:[

{id:**,name:**,is_selected:0} ......

]

}

....

]

①页面渲染

render(){
    return (
        this.state.areasloading === false ?
        <div className='callCity-list-warp'>
            <ul className="peronTool-list query-header callCity-list">
                {

                    this.state.areas.map((items,indexs)=> {
                        return (
                            items.city.length>0 &&
                            <li key={items.id}>
                                <span className="li_area">{items.name}</span>
                                <Checkbox
                                    checked={+items.is_selected_all === 0 ? false : true}
                                    onChange={()=>this.onCheckAllChange(indexs)}

                                >全选</Checkbox>
                                {

                                    items.city.map((item,index) => {
                                        return(
                                            <Checkbox
                                                key={item.id} onChange={()=>this.onChange(indexs,index)}
                                                checked={+item.is_selected === 0 ? false : true}
                                            >{item.name}</Checkbox>
                                        )
                                    })
                                }
                            </li>
                        )
                    })
                }

            </ul>
            <div className="callCity_btn">
                <Button type='button' onClick={()=>this.props.onCancel()} >取消</Button>
                <Button type='primary' 
                        loading={this.state.iconLoading} 
                        onClick={()=>this.sureQuery()} >确定</Button>
            </div>
        </div>
            :
            <div className='member-spin'>
                <Spin />
            </div>
    )
}

②方法定义

onChange=(indexs,index)=>{
    const data = this.state.areas;
    let is_selected = data[indexs]['city'][index]['is_selected'];
    data[indexs]['city'][index]['is_selected'] = +is_selected === 0 ? 1 : 0;
    if(data[indexs]['city'][index].is_selected === 0){

        data[indexs]['is_selected_all']=0
    }else{
        data[indexs]['city'].map(item=>{
            data[indexs]['is_selected_all'] =  item.is_selected === 1 ? 1 : 0
        })
    }
    this.setState({
        areas : data
    });
};
onCheckAllChange = (indexs) => {
    const data = this.state.areas;
    let is_selected_all = data[indexs]['is_selected_all'];
    data[indexs]['is_selected_all'] = +is_selected_all === 0 ? 1 : 0;

    if(data[indexs]['is_selected_all']){
        data[indexs]['city'].map((item,index)=>{
            item.is_selected = 1
        })
    }else{
        data[indexs]['city'].map((item,index)=>{
            item.is_selected = 0
        })
    }
    this.setState({
        areas : data
    });
};