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. 完美解决ListView中事件ItemCreated中使用ClientID导致插入数据失败

    于昨天晚上看到视频做到这个例子,但是发现始终有错误,在ListView的ItemCreated事件中使用了ClientID则会导致数据插入数据库失败.当点击插入按钮时,网页就像点击F5刷新一样,无任何 ...

  2. go搭建web服务

    https://github.com/astaxie/build-web-application-with-golang/blob/master/zh/preface.md

  3. [原]unity3d刀光剑影(二)

    本篇研究 暴走武侠 效果.直接贴代码 Shader "Cg shader with single texture" { Properties { _MainTex ("T ...

  4. Android反编译工具介绍与简单实用方法

    Android反编译的目的无非就是为了看到APK的xml.资源和代码: 得到代码的方式:直接解压APK文件 --> 得到classes.dex文件 --> 使用 dex2jar class ...

  5. SpringMVC由浅入深day02_5数据回显_6异常处理器

    5 数据回显 5.1 什么数据回显 表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 5.2 pojo数据回显方法 1.springmvc默认对pojo数据进行回显. po ...

  6. POJ 3258 River Hopscotch(二分法搜索)

    Description Every year the cows hold an event featuring a peculiar version of hopscotch that involve ...

  7. 解压安装的tomcat, 使用chkconfig命令让tomcat 随机启动,tomcat 变为系统服务

    使用解压安装的tomcat包,命令行输入 service tomcat start 会报 tomcat: unrecognized service 错误提示,意思是说系统没有找到该服务. 好了,我们现 ...

  8. Java md5加密 控制台传入与web传入参数 结果不匹配 || 相同字符串加密结果不同,如何保证JAVA MD5加密结果在不同的环境下都相同

    开发中遇到md5加密不一致问题,排除了上下文编码,加密内容问题. 爬了各类资料,最终找到了原因. /** 对字符串进行MD5加密 */ private static String encodeByMD ...

  9. python3.5 中Django框架连接mysql

    ps:mysqldb目前还不支持3.0python唉,最近赶了个新潮,用起了Python3.4跟Django1.6,数据库依然是互联网企业常见的MySql.悲催的是在Python2.7时代连接MySq ...

  10. postgresql 指令

    (1)用户实用程序: createdb 创建一个新的PostgreSQL的数据库(和SQL语句:CREATE DATABASE 相同) createuser 创建一个新的PostgreSQL的用户(和 ...