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

àì夳堔傛蜴生んèń 2024-03-24 09:53 18阅读 0赞

之前在写编写“圳品”信息系统中，编写了通用的checkbox全选、全部取消、反选函数，详见：

[利用eval()打造通用的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>

代码运行效果如下：

![1210024ca8d9480db99af1d13e118a67.gif][]

[eval_checkbox]: https://blog.csdn.net/Purpleendurer/article/details/128776941?spm=1001.2014.3001.5501
[1210024ca8d9480db99af1d13e118a67.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/aeb8c0802225402dbbfd666201c15cc3.png