之前在写编写“圳品”信息系统中,编写了通用的checkbox全选、全部取消、反选函数,详见:
利用eval()打造通用的checkbox全选、全部取消、反选函数
现在又根据需要增加了几组checkbox,发现通用的checkbox全选、全部取消、反选函数不好使,不够通用了。
拿之前的写的代码分析,很容易就找到了原因:之前的代码做了一个假设,即每组ckeckbox的个数是11个以内,比如这个全选通用函数代码为:
//全选
function checkAll(s)
{
for (i=0; i < 11; i++)
{
eval(s)[i].checked = true;
}
}
但是新增的checkbox组突破了11个的范围,所以要修改代码了。
由于每组ckeckbox的个数是不固定的,所以最简单的解决办法就是把ckeckbox的个数也作为通过函数的参数传递进去,比如全选通用函数就改为:
//全选
//s:checkbox名,n:checkbox数量
function checkAll(s, n)
{
for (i=0; i < n; i++)
{
eval(s)[i].checked = true;
}
}
生成checkbox全选、全部取消、反选按钮的代码也同步修改:
function showCbStateBox(n,i)
{
document.write(' <input type="button" value="全选" onclick="checkAll(', "'", n, "'",',', i,')" />');
document.write(' <input type="button" value="全部取消" onclick="uncheckAll(', "'", n, "'",',',i, ')" />');
document.write(' <input type="button" value="反选" onclick="reverseCheck(', "'", n, "'",',', i, ')" />');
}
调用语句也做相应的修改,比如:
showCbStateBox("cbArea",aArea.length);
完整的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="Author" content="PurpleEndurer">
<title>“圳品”信息系统</title>
</head>
<body>
<div id="divArea">
县(区):
<script>
//n:checkbox name, i:checkbox number
function showCbStateBox(n,i)
{
document.write(' <input type="button" value="全选" onclick="checkAll(', "'", n, "'",',', i,')" />');
document.write(' <input type="button" value="全部取消" onclick="uncheckAll(', "'", n, "'",',',i, ')" />');
document.write(' <input type="button" value="反选" onclick="reverseCheck(', "'", n, "'",',', i, ')" />');
}
aArea = new Array(
"河池", //0
"金城江", //1
"宜州", //2
"罗城", //3
"环江", //4
"南丹", //5
"天峨", //6
"东兰", //7
"巴马", //8
"凤山", //9
"都安", //10
"大化"); //11
function showAreaChkBox()
{
var i;
for (i = 0; i < aArea.length; i++)
{
document.write('<input type="checkbox" checked="true" name="',i,'" >',aArea[i],'</input> ');
}
showCbStateBox("cbArea",aArea.length);
}
showAreaChkBox();
</script>
</div>
<div id="divZpProg">
<strong>认证状态:</strong>
<script>
const aZpProg = new Array("已获评",//0
"已完成现场评价", //1
"待现场评价",//2
"待补充材料", //3
"未通过评价"//4
);
function showZpProgChkBox()
{
var i;
document.write('<input type="checkbox" checked="true" name="cbZpProg0">',aZpProg[0],'</input> ');
for (i = 1; i < aZpProg.length; i++)
{
document.write('<input type="checkbox" name="cbZpProg',i,'">',aZpProg[i],'</input> ');
}
showCbStateBox("cbZpProg",aZpProg.length);
}
showZpProgChkBox();
</script>
</div>
<div id="divCertYear">
认证时间:
<script>
function showCertYearChkBox()
{
var i, d = new Date();
d = d.getFullYear();
for (i = 2020; i <= d; i++)
{
document.write('<input type="checkbox" checked="true" name="', i, '" >', i, '</input> ');
}
showCbStateBox("cbCertYear", i-2020);
}
showCertYearChkBox();
</script>
</div>
<div id="divCol">
显示信息包含:
<script>
var g_aCol = new Array("序号","所属县区","企业名称","产品名称","证书编号","认证时间","有效期","备注");
function showColChkBox()
{
var i;
for (i = 0; i < g_aCol.length; i++)
{
document.write('<input type="checkbox" checked="true" name="',i,'" >',g_aCol[i],'</input> ');
}
showCbStateBox("cbCol", g_aCol.length);
}
showColChkBox();
</script>
</div>
<script>
var divArea = document.getElementById("divArea");
var cbArea = divArea.getElementsByTagName("input");
var divCol = document.getElementById("divCol");
var cbCol = divCol.getElementsByTagName("input");
var divZpProg = document.getElementById("divZpProg");
var cbZpProg = divZpProg.getElementsByTagName("input");
var divCertYear = document.getElementById("divCertYear");
var cbCertYear = divCertYear.getElementsByTagName("input");
//全选,s: checkbox name, n:checkbox number
function checkAll(s, n)
{
for (i=0; i < n; i++)
{
eval(s)[i].checked = true;
}
}
//全部取消,s: checkbox name, n:checkbox number
function uncheckAll(s, n)
{
for (i=0; i < n; i++)
{
eval(s)[i].checked = false;
}
}
//反选,s: checkbox name, n:checkbox number
function reverseCheck(s, n)
{
for (i=0; i < n; i++)
{
eval(s)[i].checked = !eval(s)[i].checked;
}
}
</script>
</body>
</html>
代码运行效果如下: