通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况：

1、  当前页面中所有的CHECKBOX全部选中 及取消 。

2、  当前页面中所有同名的CHECKBOX全部选中。

3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。

这里以实例的形式，展示了三种情况的操作，完整源代码如下：

<html>

<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312">
<title>全选示例</title>
</head>

<body>
<form action=""method="post"name="loginForm">
/********************全选示例********************/<br>
<b>水果（checkbox同名）：</b><br>
<input type="checkbox"name="fruit"value="1">苹果<br>
<input type="checkbox"name="fruit"value="2">梨<br>
<input type="checkbox"name="fruit"value="3">桃<br>
<input type=button value="全选水果"onclick="checkAllFruit()">
<input type=button value="取消全选水果"onclick="unCheckAllFruit()"><br>

<b>蔬菜：</b><br>
<input type="checkbox"name="vegetable"value="4">大白菜<br>
<input type="checkbox"name="vegetable"value="5">西红柿<br>

<b>水果2（checkbox不同名，具有相同的前缀名）：</b><br>
<input type="checkbox"name="_fruit1"value="6">苹果<br>
<input type="checkbox"name="_fruit2"value="7">梨<br>
<input type="checkbox"name="_fruit3"value="8">桃<br>
<input type=button value="全选水果2"onclick="checkAllFruit2()">
<input type=button value="取消全选水果2"onclick="unCheckAllFruit2()"><br>

<input type="checkbox"name="vegetable"onclick="doChangeCheckStatus(this);">全选
<input type=button value="所有全选"onclick="checkAll()">
<input type=button value="取消所有全选"onclick="unCheckAll()">

</form>
</body>
</html>
<Script language="JavaScript">...
function checkAll()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
                 objs[i].checked = true;

      }        

}
function checkAllFruit()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")            
                    objs[i].checked = true;

      }        

}
function checkAllFruit2()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
            ...{                
                    objs[i].checked = true;
            }
            
      }        

}
function unCheckAll()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )            
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit2()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
                    objs[i].checked = false;

      }        

}
function doChangeCheckStatus(obj)
...{
    if(obj.checked==true)
    ...{
        checkAll();
    }
    else
    ...{
        unCheckAll();
    }
}

</script>

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

采用JAVASCRIPT实现全选的三种情况相关推荐

  1. 在JavaScript中反转字符串的三种方法

    This article is based on Free Code Camp Basic Algorithm Scripting "Reverse a String" 本文基于F ...

  2. 在JavaScript中重复字符串的三种方法

    In this article, I'll explain how to solve freeCodeCamp's "Repeat a string repeat a string" ...

  3. GridView 实现服务器端和客户端全选的两种方法

    代码很简单,这里就不累述了.看代码如下: C# GridView 实现服务器端和客户端全选的两种方法 全选 转载于:https://www.cnblogs.com/rocky99261/archive ...

  4. mysql002多表查询.on链接分为三种情况，左链接，右链接，全链接

    -- on链接(最实用),分为三种情况,左链接,右链接,全链接 -- 左外链接,左表全部显示,如果匹配不到右表的内容使用null代替. SELECT * FROM emp e LEFT JOIN de ...

  5. java浮点数化为整数_[Java教程]javascript浮点数转换成整数三种方法

    [Java教程]javascript浮点数转换成整数三种方法 0 2014-06-24 04:00:27 将浮点数转换成整数方法有很多,分享三种常用方法. Summary 暂时我就想到3个方法而已.如 ...

  6. 【重复提交表单】表单重复提交的三种情况，解决办法

    引入 看一个重复提交表单的例子 F12可以看到,请求体中的参数在刷新页面之后仍然保留,因此每一次刷新页面,都会把现有的请求体中的表单数据提交一次到服务器,而接收的页面还是insert.jsp,于是造成 ...

  7. 在for循环中运行setTimeout的三种情况

    在for循环中运行setTimeout是前端开发很常见的一种模式.最近被考了一道相关的题目觉得很有意思也很容易犯错,于是记录下来当做学习笔记. 下面先来看一段代码: for(var i=0;i< ...

  8. js setTimeout的三种情况

    在for循环中运行setTimeout是前端开发很常见的一种模式.最近被考了一道相关的题目觉得很有意思也很容易犯错,于是记录下来当做学习笔记. 下面先来看一段代码: for(var i=0;i< ...

  9. 对象的notify方法的含义和对象锁释放的三种情况

    1,notify的含义     (1)notify一次只随机通知一个线程进行唤醒 (2)在执行了notify方法之后,当前线程不会马上释放该对象锁,呈wait状态的线程也不能马上获得该对象锁, 要等到 ...

最新文章

  1. 送给2020年高考的考生
  2. 过程作为黑箱抽象——《计算机程序的构造和解释》
  3. 易语言逐条读access数据_易语言对ACCESS数据库基础(适合新手)
  4. java随机抽题系统_在用java做一个在线考试系统，随机抽题遇到了问题，我写了一个随机抽题的方法，不知道在asp按钮中怎么用...
  5. 如何高效的比较两个 Object 对象是否相等？
  6. MATLAB提取矩阵中的一部分
  7. 如何防止app接口被别人调用
  8. 背景透明，文字不透明效果
  9. SCCM2007系列教程之九SCCM站点备份和恢复
  10. 我的Android进阶之旅------解决:debug-stripped.ap_' specified for property 'resourceFile' does not exist....
  11. mysql+order+in索引吗_mysql – 为什么ORDER BY不使用索引？
  12. 处女作：《游戏AI程序设计实战》2019.4.1
  13. Blackberry上网问题解决方案
  14. 看理想：3万辆交付意味着什么？
  15. 分布式数据库原理解析
  16. matlab获取2的整数次幂,如何快速判断正整数是2的N次幂
  17. 外贸数字化发展，进出口新业态新空间丨汇信
  18. Qt音视频开发04-保存音频文件（pcm/wav/aac）
  19. 分布式专题（一）什么是分布式
  20. 推荐一个关于视觉和图像处理的博客聚合-PIXEL SHAKERS

热门文章

  1. 【华为云技术分享】MongoDB经典故障系列五：sharding集群执行sh.stopBalancer()命令被卡住怎么办？
  2. 解密昇腾AI处理器--DaVinci架构（计算单元）
  3. 【带着canvas去流浪（14）】Three.js中凹浮雕模型的生成方式
  4. 分布式缓存Redis应用场景解析
  5. Android 短信数据库重要table字段解释
  6. 脉冲神经网络的开发公司AI-CTX
  7. 关于卸载Python第三方包的粗暴方法
  8. 通过网络连接检测计算机病毒,网络安全习题及答案
  9. python项目总结与展望_我做知识星球一周年总结与未来展望
  10. 【图像处理基础知识】中文车牌识别API-HyperLPR的应用与相关学习资料（python版）