纯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>