https://codesandbox.io/s/zxoz...

再補充一個全選，https://codesandbox.io/s/monv...

你的map展示會有什么問題？

 */
import React, {Component} from 'react'
import { observer } from "mobx-react"
import {Checkbox} from 'antd'
const Options = [{id:1,name:'Apple'}, {id:2,name:'Pear'}, {id:3,name:'Orange'}];
@observer
export default class CheckAll extends Component {
    state = {
        Options: [
            {id: 1, name: 'Apple', checked: false},
            {id: 2, name: 'Pear', checked: false},
            {
                id: 3,
                name: 'Orange',
                checked: false
            }],
        checked: false,
        checkedId: []
    };

    onChange=(item)=>{
        let i=0;
        let l=0;
        Options.map((option,index)=>{
            if(option.id==item.id){
                option.checked=!item.checked
            }if(option.checked==true){
                i+=1
            }if(option.checked==false){
                l+=1
            }
        });

        if(Options.length==i){
            this.state.checked=true;
        }if(Options.length==l){
            this.state.checked=false;
        }
        this.setState({
            Options:Options,
            checked:this.state.checked
        })
    }

    handleCheckAll=()=>{
        
        this.setState({checked:!this.state.checked});
        if(!this.state.checked){
            this.state.checkedId=[]
            Options.map((option,index)=>{

                this.state.checkedId.push(option.id)
            })
            this.state.checkedId.map((id,index)=>{
                Options.map((Option,idx)=>{
                    if(Option.id==id){
                        Option.checked=true;
                    }
                })
            })

        }else{
            this.state.checkedId.map((id,index)=>{
                Options.map((Option,idx)=>{
                    if(Option.id==id){
                        Option.checked=false;
                    }
                })
            })
            this.state.checkedId=[]
        }
        this.setState({
            Options:Options
        })
    };
    render(){
        return(
            <div>
                <Checkbox checked={this.state.checked} onClick={this.handleCheckAll.bind(this)}/>全選
                {Options.map((option,index)=>{
                    return(<Checkbox content={option.id} onChange={this.onChange.bind(this,option)} checked={option.checked}>{option.name}</Checkbox>)
                })}

            </div>
        )
    }
}