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实现全选、取消全选和个别选择的更多相关文章

  1. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

  3. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  4. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  5. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  6. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  7. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  8. Vue 全选/取消全选,反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  9. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  10. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

随机推荐

  1. Ruby 面向对象知识详解

    Ruby 是纯面向对象的语言,Ruby 中的一切都是以对象的形式出现.Ruby 中的每个值都是一个对象,即使是最原始的东西:字符串.数字,甚至连 true 和 false 都是对象.类本身也是一个对象 ...

  2. 字符编码笔记:ASCII,Unicode 和 UTF-8

    http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html

  3. jquery获取元素颜色css('color')的值返回RGB

    css代码如下: a, a:link, a:visited { color:#4188FB; } a:active, a:focus, a:hover { color:#FFCC00; } js代码如 ...

  4. ns-3 的下载、编译以及 Eclipse 的相关配置

    0. 写在前面 对于初次接触Linux系统的人来说,ns-3 的安装似乎并不友好.但其实仅仅要按部就班地来做,其安装过程也没有看上去的那么复杂.本文将官方 Wiki 中的安装过程稍作梳理,希望能为刚開 ...

  5. Mybatis -- 批量添加 -- insertBatch

    啦啦啦 ---------------InsertBatch Class : Dao /** * 批量插入perfEnvirons * * @author Liang * * 2017年4月25日 * ...

  6. iOS LLDB调试精解

    小笨狼与LLDB: http://jiangliancheng.gitcafe.io/2015/12/13/%E5%B0%8F%E7%AC%A8%E7%8B%BC%E4%B8%8ELLDB%E7%9A ...

  7. DrawCall 优化 .

    unity3D 对于移动平台的支持无可厚非,但是也有时候用Unity3D 开发出来的应用.游戏在移动终端上的运行有着明显的效率问题,比如卡.画质等各种问题.自己在做游戏开发的时候偶有所得.对于主要影响 ...

  8. Python系统编程笔记

    01. 进程与程序 编写完毕的代码,在没有运行的时候,称之为程序 正在运行着的代码,就称为进程 进程是系统分配资源的最小单位. 进程资源包括: 中间变量 代码 计数器 02. 通过os.fork()函 ...

  9. 《转》Robot Framework 的安装配置和简单的实例介绍

    Robot Framework 介绍 Robot Framework 是一款基于 Python 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...

  10. Ubuntu VMware出现提示No 3D support is available的解决方法

    像我这样的Ubuntu脑残粉,电脑上只安装了Ubuntu,但是有时又必须得使用Windows,于是就装了一个Windows虚拟机,使用的是VMware,问题出在默认设置下启动虚拟机无法启动3D硬件加速 ...