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

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

昨天对“圳品”信息系统中的通用的checkbox全选、全部取消、反选函数内部代码进行了修改完善,在Edge浏览器中运行正常。详见:利用eval()打造通用的checkbox全选、全部取消、反选函数升级版+2

今天测试发现代码在editplus(应该是调用IE浏览器)中运行时会出错,比如点击“全部取消”按钮: image.png 经分析研究,决定先对checkbox进行判断,再检测是否有checked属性值。

调试发现checkbox的值为“[object HTMLInputElement]”,那么我们对通用函数代码进行修改,比如全选按钮函数代码改为:

//全选,s:checkboxname
function checkAll(s)
{
  var i = 0;  
  while (eval(s)[i]=="[object HTMLInputElement]"
         && typeof(eval(s)[i].checked)!="undefined")
  {
            eval(s)[i++].checked = true;
  }
}

完整的代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta name="Author" content="PurpleEndurer">
  <title>“圳品”信息系统</title>
</head>
<body>
  <p><strong>利用eval()打造通用的checkbox全选、全部取消、反选通用函数升级版+3 by PurpleEndurer</strong></p>  
    <div id="divArea">
        县(区): 
        <script>
            function showCbStateBox(n)
            {
                document.write(' <input type="button" value="全选" onclick="checkAll(', "'", n, "'",')" />');
                document.write(' <input type="button" value="全部取消" onclick="uncheckAll(', "'", n, "'", ')" />');
                document.write(' <input type="button" value="反选" onclick="reverseCheck(', "'", n, "'", ')" />');
            }
 
            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> ');
                 }
            }       
            showAreaChkBox();
            showCbStateBox("cbArea");
        </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");
    }       
    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> ');
               }
            }       
            showCertYearChkBox();
            showCbStateBox("cbCertYear");
        </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> ');
                }
            }       
            showColChkBox();
            showCbStateBox("cbCol");
        </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:checkboxname
function checkAll(s)
{
  var i = 0;  
  while (eval(s)[i]=="[object HTMLInputElement]"
         && typeof(eval(s)[i].checked)!="undefined")
  {
            eval(s)[i++].checked = true;
  }
}
 

 
//全部取消,s:checkboxname
function uncheckAll(s)
{
  var i = 0;  
  while (eval(s)[i]=="[object HTMLInputElement]"
         && typeof(eval(s)[i].checked)!="undefined")
  {
            eval(s)[i++].checked = false;
    }
}

 
//反选,s:checkboxname
function reverseCheck(s)
 {
  var i = 0;  
  while (eval(s)[i]=="[object HTMLInputElement]"
         && typeof(eval(s)[i].checked)!="undefined" )
  {
            eval(s)[i].checked = !(eval(s)[i].checked);
        i++;
  }
}              
</script>
 
</body>
</html>

在EditPlus中的运行效果如下:

image.png image.png

相关文章
|
7月前
|
运维 负载均衡 安全
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
251 0
|
7月前
|
域名解析 运维 网络协议
推荐一款专业级的动态域名解析系统 - bind webadmin
`bind webadmin`是一款基于Bind9打造的高效DNS管理系统,简化了DNS配置与管理流程,适用于动态IP环境下的远程访问需求。此系统不仅便于维护,还支持API接口,方便自动化操作与第三方应用集成,特别适合远程办公、智能家居及各类物联网应用场景。其自托管特性保障了数据的安全与可控性,同时提供了详尽的中文安装教程,易于部署。项目地址:[bindwebadmin](https://github.com/guofusheng007/bindwebadmin.git)。建议使用阿里云主机以获得最佳性能。
|
7月前
|
网络协议 Linux 网络性能优化
Linux基础-socket详解、TCP/UDP
综上所述,Linux下的Socket编程是网络通信的重要组成部分,通过灵活运用TCP和UDP协议,开发者能够构建出满足不同需求的网络应用程序。掌握这些基础知识,是进行更复杂网络编程任务的基石。
316 1
|
8月前
|
域名解析 运维 负载均衡
LVS+Keepalived 负载均衡(二)28-1
【8月更文挑战第28天】LVS+Keepalived 负载均衡 配置 LVS VIP
128 5
|
存储 API iOS开发
苹果手机iOS如何使用http代理
我们使用苹果手机访问网络时,有时候需要配置代理服务器。下面就来介绍一下。
苹果手机iOS如何使用http代理
|
数据可视化 数据挖掘 索引
Python 数据分析 —— Matplotlib ①
Python 数据分析 —— Matplotlib ①
780 0
Python 数据分析 —— Matplotlib ①
|
存储 负载均衡 前端开发
鉴权 5 兄弟:cookie、session、token、jwt、单点登录,终于有人说清楚了。。。(1)
鉴权 5 兄弟:cookie、session、token、jwt、单点登录,终于有人说清楚了。。。(1)
450 0
鉴权 5 兄弟:cookie、session、token、jwt、单点登录,终于有人说清楚了。。。(1)
百度静态资源库无法打开的解决办法
介绍在百度静态资源库无法打开的解决办法(多种方式)
百度静态资源库无法打开的解决办法
|
数据挖掘
重点人员动态管控预警系统开发方案,情报研判分析平台建设
重点人员动态管控预警系统开发方案运用新一代信息技术和智能化大数据分析,统一构建重点人员管控系统。将辖区内的各类重点人员的基本信息统一采集录入,更新,统一汇总分析研判,分类采取管控措施。
713 0
下一篇
阿里云OSS
OSZAR »