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.length
        let 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
        })
} }
若有更优化的方案,欢迎提出~
react实现全选、取消全选和个别选择的更多相关文章
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
		<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ... 
- jQuery--checkbox全选/取消全选
		用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ... 
- AngularJS--购物车全选/取消全选功能实现
		刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ... 
- jQuery 复选框全选/取消全选/反选
		jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ... 
- html checkbox  实现全选/取消全选
		html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ... 
- checkbox全选/取消全选
		//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ... 
- 【转载】checkbox实现全选/取消全选
		比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ... 
- Vue 全选/取消全选,反选/取消反选
		这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ... 
- vue实现功能 单选 取消单选 全选 取消全选
		vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ... 
- jquery checkbox勾选取消勾选的诡异问题
		jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form> 你爱好的运动是?<input type=&q ... 
随机推荐
- 如何在LINUX中安装VM-Tools
			1.运行VM,启动你的虚拟LINUX系统. 2.切换到原系统,选择VM中的VM菜单----Install VMWare Tools. 3.在虚拟机设置里,请把你的VM-Tools的ISO文件映射到你的 ... 
- liunx(centos7 ) 免密码登录
			centos7 1.准备两台机器 如:(A机器) 和 (B机器) A机器 删除(.ssh目录下文件 known_hosts) 2. 对两台机器生成密钥 在 (A机器)上执行命令: [root@iZ ... 
- Tomcat------如何查看80端口是否被占用
			1.Window + R,打开“运行”窗口,输入cmd 2.输入netstat -nao,回车,一般来说80端口会被PID为4的程序占用 3.启动任务管理器,点击“查看”->“选择列” 4.勾选 ... 
- [转]mac osx  下的apt-get,yum的代替工具 ----homebrew
			原文地址:http://blog.csdn.net/tsxw24/article/details/15500517 linux下有很方便的包管理器如:apt-get.yum,mac下也有类似的工具:H ... 
- 免费SVN、Git项目托管主机推荐
			Unfuddle 200MB的免费空间,界面友好,特性丰富,支持Git,但只能一个账户一个用户并且只允许一个项目,付费服务相对来说价格偏高 CodeSpaces 500MB,一个账户两个免费用户,付费 ... 
- iOS开发-UIImageView的contentMode属性
			UIImageView 的contentMode这个属性是用来设置图片的显示方式,如居中.居右,是否缩放等,有以下几个常量可供设定:UIViewContentModeScaleToFillUIView ... 
- postgresql 指令
			(1)用户实用程序: createdb 创建一个新的PostgreSQL的数据库(和SQL语句:CREATE DATABASE 相同) createuser 创建一个新的PostgreSQL的用户(和 ... 
- Linux 日常运维
			查看用户信息:w 查看系统负载:uptime 查看系统资源使用情况:vmstat 查看进程动态:top 查看网卡流量:sar 查看网卡流量:nload 查看磁盘读写:iostat 查看磁盘读写:iot ... 
- 安装RVDS2.2
			本人经过一晚上的折腾,已经将rvds2.2成功部署在为AMD平台的CPU上面,除了些许小BUG外,编译程序无任何错误,可成功将产上的AXF文件通过Jlink烧制到开发板上. 感谢cdly7475为我们 ... 
- Vim 手记:语法高亮
			本文覆盖范围: Vim 的着色方案 设置高亮 选择颜色 语法高亮除错 每个程序员的文本编辑器缺少了语法高亮.特殊关键字和短语着色,都是不完整的.语法高亮突出了文档的结构,帮助发现排字错误,利于调试,整 ... 
