js react 全选和反选

onCheckAll = (data) => {
		var CheckBox  = document.getElementsByName(data);
		for(let i=0;i<CheckBox.length;i++){
            if(CheckBox[i].checked==true){
                     CheckBox[i].checked=false;
            } else{
                 CheckBox[i].checked=true
            }
        };
	}

const columnWBS = [
			{title:‘WBS节点名称‘,dataIndex:‘label‘},
			{title:‘权限‘,dataIndex:‘qx‘,
			render: (text, record, index) =>(
		      	<span >
			      	<Button size="small" onClick={this.onCheckAll.bind(this,record.key)} style={{marginRight:‘5px‘}}> 全选</Button>
			      	<span id="checkBoxWrap">
				      	<input type="checkbox"  name={record.key} style={{marginLeft:‘5px‘}}/> 添加
				      	<input type="checkbox"  name={record.key} style={{marginLeft:‘5px‘}}/> 删除
				      	<input type="checkbox"  name={record.key} style={{marginLeft:‘5px‘}}/> 编辑
				      	<input type="checkbox"  name={record.key} style={{marginLeft:‘5px‘}}/> 查看
				    </span>
		      	</span>

			)}]

  

时间: 2025-01-08 16:20:30

js react 全选和反选的相关文章

用js做出全选和反选效果

效果图如下: <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript"> $(function(){  $("#selecAll").clic

elementUI+JS实现全选与反选

在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initia

原生js实现全选和反选以及任意一个未被选中的效果

模仿一个百度音乐的全选和反选的的操作. html代码如下: <div class="box"> <ul id="lists"> <li> <input type="checkbox" value=""> <span>我爱你中国</span> </li> <li> <input type="checkbox"

js CheckBox 全选、反选

<h3>你最喜欢的水果是?</h3> <label><input type="checkbox"/>苹果</label> <label><input type="checkbox"/>香蕉</label> <label><input type="checkbox"/>梨</label> <label>&l

利用js实现全选、反选、全不选(button)

<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><script type="text/javascript">window.onload=function(){var allSelect=document.getElementById("allSelect");var noSelec

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

JS如何实现对name是数组的复选框的全选和反选以及取消选择

JS如何实现对name是数组的复选框的全选和反选以及取消选择? form内容如下: 因为PHP接收要用 数组形式的 复选框,正常情况下 JQ可如果是这种 直接使用 $("input[name=ptpt])即可.但是这种php接收的只是最后一个值,字符串.<label><input type='checkbox' name='ptpt' value='a1' />a1</label><label><input type='checkbox' n

简单JS全选、反选代码

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Cont

js 实现全选反选

最近在做一个js特效:全选,反选. 效果能实现,可是只执行了一次.多次点击,发现效果不能触发了.后来查了些文档,才了解是  attr  跟 prop 的区别! 代码直接贴出来: ($("#全选ID").attr("checked") 的返回值 就是  true/false )  attr只能运行一次:   function checked_all(){                            $("input[name='XXX']:chec