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 ...
随机推荐
- 代码记录——phase16,block36
36*36 -2,-2扩展 代码有问题,有时能运行有时报错. HRESULT RotateZoom(PBYTE pbSrc,int iWidth,int iHeight,double dbRotate ...
- mysql中,通过json_insert函数向json字段插入键值?json_insert函数的使用?
需求描述: 通过json_insert向json字段中插入值,在此进行实验,记录下. 操作过程: 1.查看已经有的包含json数据类型的表 mysql> select * from tab_js ...
- 第五种方式,python使用组合来添加类方法和属性(二),以selenium的webdriver为例
组合优点多,但经常比继承需要额外的代码. 上一篇是 介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的四种方式. 此篇介绍直接把被组合的类的属性直接加入到类里面,前面的四个例子很简单, ...
- Faulty Odometer(九进制数)
Faulty Odometer Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9301 Accepted: 5759 D ...
- uploadify在火狐下上传不了的解决方式,java版(Spring+SpringMVC+MyBatis)具体解决方式
因为技术选型的原因,在一个产品中.我选择了uploadify,选择它的原因是它有完好的技术文档说明(http://www.uploadify.com/documentation/),唯一不足的是 ...
- swoole的进程模型架构
swoole的强大之处就在与其进程模型的设计,既解决了异步问题,又解决了并行. 主线程MainReactor swoole启动后主线程会负责监听server socket,如果有新的连接accept, ...
- WPF设置样式的几种方式
第一种方式是直接使用Setter来进行,可以对Background等进行设置. <Window.Resources> <Style TargetType="Button&q ...
- 后端判断用户是否关闭浏览器(关闭网站相关的全部tab)
一)程序步骤 1.js 写一个定时请求后端(php),后端接收到请求到,把当前时间戳写入文件 2.php 阻塞,这里我写的是 30 秒,也就是 sleep(30) 3.获取当前时间和文件里的时间作比较 ...
- Git 学习笔记--3.EGit使用手册
zz http://blog.csdn.net/pandakong/article/details/7234974 EGit是Eclipse上的Git插件,官方内容参看http://wiki.ecli ...
- U3D 使用VS编程组件
http://visualstudiogallery.msdn.microsoft.com/6e536faa-ce73-494a-a746-6a14753015f1 http://visualstud ...