需要实现的功能：
- 点击全选，把所有选项选中或者取消勾选
- 如果全选之后，取消勾选其中一个或多个，则把全选也取消勾选
- 如果所有选项都选中的话，那么把全选也选中
下面用两种方法实现：
借助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;
效果：
