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

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.lengthlet 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})

}  }

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

转载于:https://www.cnblogs.com/leiting/p/10472327.html

react实现全选、取消全选和个别选择相关推荐

jquery全选/取消全选(反选)/单选操作
使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body><div& ...
jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换
应用一:单行文本框应用需要用到的 API focus([[data],fn]) --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn]) --> ...
表单全选取消全选案例
表单全选取消全选案例要求: 点击上面全选复选框 , 下面所有的复选框都选中(全选) 再次点击全选复选框 , 下面所有的复选框都不选中(取消全选) 如果下面复选框全部选中 , 上面全选按钮自动选中如 ...
实现全选/取消全选功能
这里是使用jquery为前提: 方法一: /*** 绑定全选/取消全选* @param checkAll 全选复选框* @param checkOne 单个复选框*/ function onCheck ...
Android 切换全屏,取消全屏
切换全屏,取消全屏 /*** 切换全屏,取消全屏** @param isChecked*/ private void switchFullScreen(boolean isChecked) {if ( ...
element-ui tree 点击章节节点勾选/取消勾选
element-ui tree 点击章节节点勾选/取消勾选遇到一个需求,要求点击tree组件的章节时(不是点击checkBox),要进行节点勾选/取消勾选操作: 原本想的方案非常复杂,涉及到遍历父子 ...
DataGrid 的全选/取消全选控制(CheckBox)
DataGrid控件: <Columns> <asp:TemplateColumn> <HeaderStyle Width=" ...
【小白学前端】JS案例：表单全选取消全选
要求: 1.点击全选按钮,可以选中所有产品前的选择框: 2.再点击一次,取消全选 3.每个产品可以单独选中取消 4.每个产品都选中时,全选框自动选中 5.取消一个产品的选择时,全选框自动取消 HTML ...
QAbstractItemView子类如:QTreeView、QTableView等子项单元格复选框勾选/取消勾选功能实现
1.前言本博文所说的技术点适用于同时满足下面条件的所有QAbstractItemView视图类的子类: 模型类从 QAbstractItemModel派生. 代理类从QStyledItemDeleg ...
vue 点击浏览器全屏取消全屏
<template><div><img @click="fullscreenToggel" v-if="f ...

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

react实现全选、取消全选和个别选择相关推荐

最新文章

热门文章