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
        })
}  } 

若有更优化的方案,欢迎提出~

原文地址:https://www.cnblogs.com/leiting/p/10472327.html

时间: 2024-11-10 08:28:13

react实现全选、取消全选和个别选择的相关文章

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

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

全选/取消全选那点事

今天我花了半天时间处理checkbox全选/取消全选那点事 技术领域 可信计算 其他   全选 申请日 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016  年  至 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 至今 年 专利类型 发明专利 实用新型   全选 授权

jquery全选/取消全选(反选)/单选操作

使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body>    <div>        <input id="checkAll" type="checkbox" />全选        <input name="subBox" type="checkbox" />

jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

应用一:单行文本框应用 需要用到的 API focus([[data],fn])   --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn])     --> 当元素失去焦点时,触发 blur 事件 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></ti

html checkbox 实现全选/取消全选

html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> <th><input type="checkbox" onclick="swapCheck()" /></th> <th>Month</th> <th>Savings</th> </tr

checkbox全选/取消全选

//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $("input[name='cbxCommodity']").prop("checked","checked"); }else{ $("input[name='cbxCommodity']").removeAttr("check

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

刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

jquery checkbox勾选/取消勾选的诡异问题

<form> 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" v

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

jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />        <input type="checkbox" name="items" value="足球"

jquery全选,取消全选

最近项目又用到了这个全选和取消全选的操作. 以前总是自己写纯JS.现在既然知道怎么写了.那如何用JQ写得更简洁呢.这样也能学到新的东西.如果乎百度一下果然发现了好东东.感谢OSC的iuhoay. 代码如下: [javascript] view plaincopy <script type="text/javascript" src="/web/bzz_index/password/js/jquery-1.7.1.min.js"></script&g