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 ...
随机推荐
- Ruby 面向对象知识详解
Ruby 是纯面向对象的语言,Ruby 中的一切都是以对象的形式出现.Ruby 中的每个值都是一个对象,即使是最原始的东西:字符串.数字,甚至连 true 和 false 都是对象.类本身也是一个对象 ...
- 字符编码笔记:ASCII,Unicode 和 UTF-8
http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html
- jquery获取元素颜色css('color')的值返回RGB
css代码如下: a, a:link, a:visited { color:#4188FB; } a:active, a:focus, a:hover { color:#FFCC00; } js代码如 ...
- ns-3 的下载、编译以及 Eclipse 的相关配置
0. 写在前面 对于初次接触Linux系统的人来说,ns-3 的安装似乎并不友好.但其实仅仅要按部就班地来做,其安装过程也没有看上去的那么复杂.本文将官方 Wiki 中的安装过程稍作梳理,希望能为刚開 ...
- Mybatis -- 批量添加 -- insertBatch
啦啦啦 ---------------InsertBatch Class : Dao /** * 批量插入perfEnvirons * * @author Liang * * 2017年4月25日 * ...
- iOS LLDB调试精解
小笨狼与LLDB: http://jiangliancheng.gitcafe.io/2015/12/13/%E5%B0%8F%E7%AC%A8%E7%8B%BC%E4%B8%8ELLDB%E7%9A ...
- DrawCall 优化 .
unity3D 对于移动平台的支持无可厚非,但是也有时候用Unity3D 开发出来的应用.游戏在移动终端上的运行有着明显的效率问题,比如卡.画质等各种问题.自己在做游戏开发的时候偶有所得.对于主要影响 ...
- Python系统编程笔记
01. 进程与程序 编写完毕的代码,在没有运行的时候,称之为程序 正在运行着的代码,就称为进程 进程是系统分配资源的最小单位. 进程资源包括: 中间变量 代码 计数器 02. 通过os.fork()函 ...
- 《转》Robot Framework 的安装配置和简单的实例介绍
Robot Framework 介绍 Robot Framework 是一款基于 Python 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...
- Ubuntu VMware出现提示No 3D support is available的解决方法
像我这样的Ubuntu脑残粉,电脑上只安装了Ubuntu,但是有时又必须得使用Windows,于是就装了一个Windows虚拟机,使用的是VMware,问题出在默认设置下启动虚拟机无法启动3D硬件加速 ...