react表单全选、取消全选、反选

需要实现的功能：

• 点击全选，把所有选项选中或者取消勾选
• 如果全选之后，取消勾选其中一个或多个，则把全选也取消勾选
• 如果所有选项都选中的话，那么把全选也选中

下面用两种方法实现：

借助jquery

在react项目中使用jquery要先安装jquery并引入$

yarn add jquery

import $ from 'jquery';

代码如下：

import React,{Component} from 'react';
import $ from 'jquery';

class FormSelect extends Component{
    constructor(props){
        super(props);
        this.state = {
            checklist:["Amethyst","Cloud","Lanlan","Puppy"]
        }
    }
    render(){
        return (
            <div className='selectform'>
                <div>表单全选demo</div>
                <label><input type='checkbox' className='all'/>全选<br/></label>
                <div className='tbd'>
                {
                    this.state.checklist.map((item)=>{
                        return <label key={item}>
                            <input type='checkbox'/>{item}<br/>
                        </label>
                    })
                }
                </div>
            </div>
        );
    }

    componentDidMount(){
        $(".all").on('click',function() {
            $(".tbd input").prop("checked",$(this).prop("checked"));
        });

        $(".tbd input").on('click',function() {
            if($(".tbd input:checked").length===$(".tbd input").length){
                $(".all").prop("checked",true);
            }else{
                $(".all").prop("checked",false);
            }
        })
    }
} 

export default FormSelect;

这里复习回顾一下jquery中的prop()和attr()：

• 二者获取、设置属性的用法相同：
  设置：prop(属性)
  获取：prop(属性，属性值)，attr()同理

• 操作checked、disabled、selected、hidden…等固有属性时，用prop,如用attr来获取checked，选中状态获取attr（“checked”）为checked，没有选中则为undefined。而prop来获取的为，选中为true，没有选中为false。

第二种方法

import React,{Component} from 'react';

class FormSelect extends Component{
    constructor(props){
        super(props);
        this.state = {
            checklist:[
                {name:'全选',checked:false},
                {name:'Amethyst',checked:false},
                {name:'Cloud',checked:false},
                {name:'Lanlan',checked:false}
            ]
        }
    }

    render(){
        const that=this;
        return (
            <div className="selectform">
                <div>这是全选取消全选的demo</div>

                {
                    this.state.checklist.length?
                    this.state.checklist.map(function(item,index){
                        return <div key={index}>
                            <label><input type="checkbox" onChange={()=>{that.handleChange(item)}} checked={item.checked}/>{item.name}</label>
                        </div>
                    })
                    :''
                }
                
            </div>
        )
    }

    //改变第一个checkbox的选中状态
    changeFirstItem(value){
        let checklist=[...this.state.checklist];
        checklist.splice(0,1,{name:"全选",checked:value});
        setTimeout(()=>{
            this.setState({
                checklist:checklist
            });
        },0);
    }

    //根据全选checkbox的选中状态设置其他选项的选中状态
    handleChange(item){
        item.checked=!item.checked;
        if(item.name==='全选'){
            if(item.checked){
                this.state.checklist.forEach((i,index)=>i.checked=true);
            }else{
                this.state.checklist.forEach((i,index)=>i.checked=false);
            }
        }

        //除了第一个其他都勾选的话，第一个就全选
        let res=this.state.checklist.every(i=>{
            if(i.name!=='全选'&&!i.checked){
                return false;
            }
            return true;
        })
        
        if(res){
            this.changeFirstItem(true);
        }else{
            this.changeFirstItem(false);
        }

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

export default FormSelect;

效果：