纯javascript实现全选全不选以及反选效果

乐之者java

于 2020-05-27 20:32:20 发布

阅读量466

点赞数 1

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106389925

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

纯javascript实现全选全不选效果如下：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单位存款</title>
<link type="text/css" rel="stylesheet" href="normalize.css" />
<link type="text/css" rel="stylesheet" href="gridshow.css" />

<style>
	
</style>

</head>
<body>
  	<table class="datatable-head">
    <thead>
      <tr>
	  	<td id="all">全选</td>
        <td>日期</td>
        <td>时间</td>
        <td>银行名称</td>
        <td>账号</td>
        <td>出入账名称</td>
        <td >金额</td>
        <td>对方国别</td>
        <td >交易性质名称</td>
      </tr>
    </thead>
  </table>
  <div id="marquees">
    <table id="datatable" class="datatable">
      <tbody>
             <tr>
              <td><input type="checkbox" value="row1"></td>
              <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
              <td class="xl68" style="border-top:none;border-left:none">09:30:08</td>
              <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
              <td class="xl68" style="border-top:none;border-left:none">FTN9884554100002014</td>
              <td class="xl68" style="border-top:none;border-left:none">入账</td>
              <td class="xl69" style="border-top:none;border-left:none">2,199,975.00</td>
              <td class="xl68" style="border-top:none;border-left:none">香港</td>
              <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
             </tr>
             <!--省略多个tr-->
      </tbody>
    </table>
    <table id="scroller" class="datatable"></table>
  </div>
  <input type="button" id="not"  value="全不选"  >
   <input type="button" id="fanxuan"  value="反选"  >
</body>
</html>

实现全选全不选反选效果的javascript代码：

 <script>

	document.getElementById("all").onclick=function(){
		var ck=document.getElementsByTagName("input");
		for(var i=0;i<ck.length;i++){
			var oneck=ck[i];
			if(!oneck.checked){
				oneck.checked="checked";
			}
		}
	}
	document.getElementById("not").onclick=function(){
		var tb=document.getElementById("datatable");
		var ck=tb.getElementsByTagName("input");
		for(var i=0;i<ck.length;i++){
			var oneck=ck[i];
			if(oneck.checked){
				oneck.checked=false;
			}
		}
	}
	document.getElementById("fanxuan").onclick=function(){
		var tb=document.getElementById("datatable");
		var ck=tb.getElementsByTagName("input");
		for(var i=0;i<ck.length;i++){
			var oneck=ck[i];
			if(oneck.checked){
				oneck.checked=false;
			}else{
				oneck.checked=true;
			}
		}
	}
</script>

乐之者java

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
纯javascript实现全选全不选以及反选效果

纯javascript实现全选全不选效果如下：html代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>单位存款</title><linktype="text/css"rel="stylesheet"href="normalize.css"/><linktype="text/css"rel="stylesheet"...
复制链接

扫一扫

专栏目录