利用eval()打造通用的checkbox全选、全部取消、反选函数升级版+1

紫郢剑侠

已于 2023-03-29 14:08:41 修改

阅读量156

点赞数

文章标签： javascript ecmascript HTML checkbox 通用函数

于 2023-03-28 23:15:00 首次发布

本文链接：https://blog.csdn.net/Purpleendurer/article/details/129808598

版权

之前在写编写“圳品”信息系统中，编写了通用的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>

代码运行效果如下：

紫郢剑侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用eval()打造通用的checkbox全选、全部取消、反选函数升级版+1

“圳品”信息系统根据需要增加了几组checkbox，发现之前写的通用的checkbox全选、全部取消、反选函数不好使、不够通用了。在分析代码、找到原因后需要改进……
复制链接

扫一扫