JavaScript小例子：复选框全选

　　这只是一个小例子，很简单，但是这个功能还是很常用的：

　　实现后效果如图：

　　

　　JavaScript代码：

  1.     <script type="text/javascript">
  2.     function selectAll()
  3.     {
  4.         var allMails = document.getElementsByName("allMails")[0];
  5.         var mails = document.getElementsByName("email");
  6.  
  7.         if(allMails.checked)
  8.         {
  9.             for(var i = 0; i < mails.length; ++i)
  10.             {
  11.                 mails[i].checked = true;
  12.             }    
  13.  
  14.         }
  15.         else
  16.         {
  17.             for(var i = 0; i < mails.length; ++i)
  18.             {
  19.                 mails[i].checked = false;
  20.             }
  21.         }
  22.  
  23.     }
  24.     </script>

　　JSP页面：

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.  
  11.     <script type="text/javascript">
  12.     function selectAll()
  13.     {
  14.         var allMails = document.getElementsByName("allMails")[0];
  15.         var mails = document.getElementsByName("email");
  16.  
  17.         if(allMails.checked)
  18.         {
  19.             for(var i = 0; i < mails.length; ++i)
  20.             {
  21.                 mails[i].checked = true;
  22.             }    
  23.  
  24.         }
  25.         else
  26.         {
  27.             for(var i = 0; i < mails.length; ++i)
  28.             {
  29.                 mails[i].checked = false;
  30.             }
  31.         }
  32.  
  33.     }
  34.     </script>
  35.  
  36.   </head>
  37.  
  38.   <body>
  39.     全选<input type="checkbox" onclick="selectAll()" name="allMails"><br><br><br>
  40.     <input type="checkbox" name="email"><br>
  41.     <input type="checkbox" name="email"><br>
  42.     <input type="checkbox" name="email"><br>
  43.     <input type="checkbox" name="email"><br>
  44.     <input type="checkbox" name="email"><br>
  45.     <input type="checkbox" name="email"><br>
  46.     <input type="checkbox" name="email"><br>
  47.   </body>
  48. </html>

参考资料

　　圣思园张龙老师Java Web培训视频。

JavaScript小例子：复选框全选的更多相关文章

  1. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  2. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  5. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  6. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  7. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  9. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. android中出现Error retrieving parent for item: No resource found that matches the Theme.AppCompat.Light

    styles.xml中<style name="AppBaseTheme" parent="Theme.AppCompat.Light">提示如下错 ...

  2. .net后台模拟浏览器get/post请求

    #region 后台模拟浏览器get/post请求 /// <summary> /// 发送请求方式 /// </summary> /// <param name=&qu ...

  3. 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要二

    今天继续分享我的阅读<LEARNING HARD C#学习笔记>知识点总结与摘要二,仍然是基础知识,但可温故而知新. 七．面向对象 三大基本特性: 封装:把客观事物封装成类,并隐藏类的内部 ...

  4. Hichart 资料收集

    Hichart简单使用Highcharts选项配置详细说明文档(zz) http://www.helloweba.com/view-blog-156.html  by 澳米科技 Highcharts提 ...

  5. WinForm菜单和工具栏

    菜单和工具栏: 1.MenuStrip - 顶部菜单栏分割线:1输入- 2.右键插入 |SpearTOR 快捷键设置:每一个项右键属性的最下面可以设置快捷键不管选项隐藏还是菜单隐藏,快捷键都管用 2. ...

  6. lua学习之table类型

    关系表类型,这是一个很强大的类型.我们可以把这个类型看作是一个数组.只是 C语言的数组,只能用正整数来作索引: 在Lua中,你可以用任意类型的值来作数组的索引,但这个值不能是 nil.同样,在C语言中 ...

  7. C#写爬虫，版本V1.0

    之前看了Sql Server中的基本数据类型,发现image这个类型还是比较特殊的. 于是乎就做了一个将图片以二进制流形式存储的程序http://www.cnblogs.com/JsonZhangAA ...

  8. Eclipse使用多个Console

    调试程序时,有时需要同时使用多个Console,如一个Console运行Server,一个Console运行Client.而一般情况下Eclipse只有一个Console,这时就需要增加一个Conso ...

  9. GitHub上下载源代码的方法

    GitHub上找到自己要下载的项目以后,有3种方法可以下载源代码. 第一种是复制该项目的地址,然后用其他软件下载: 第二种是安装了官方客户端,可以直接点击"Clone in Desktop& ...

  10. python mysql Connect Pool mysql连接池 (201

     easy_install mysql-connector-python >>>import mysql.connector as conner >>> conn ...