JavaScript小例子：复选框全选

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

　　实现后效果如图：

　　

　　JavaScript代码：

    <script type="text/javascript">

    function selectAll()

    {

        var allMails = document.getElementsByName("allMails")[0];

        var mails = document.getElementsByName("email");

        if(allMails.checked)

        {

            for(var i = 0; i < mails.length; ++i)

            {

                mails[i].checked = true;

            }    

        }

        else

        {

            for(var i = 0; i < mails.length; ++i)

            {

                mails[i].checked = false;

            }

        }

    }

    </script>

　　JSP页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

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

<html>

  <head>

    <script type="text/javascript">

    function selectAll()

    {

        var allMails = document.getElementsByName("allMails")[0];

        var mails = document.getElementsByName("email");

        if(allMails.checked)

        {

            for(var i = 0; i < mails.length; ++i)

            {

                mails[i].checked = true;

            }    

        }

        else

        {

            for(var i = 0; i < mails.length; ++i)

            {

                mails[i].checked = false;

            }

        }

    }

    </script>

  </head>

  <body>

    全选<input type="checkbox" onclick="selectAll()" name="allMails"><br><br><br>

    <input type="checkbox" name="email"><br>

    <input type="checkbox" name="email"><br>

    <input type="checkbox" name="email"><br>

    <input type="checkbox" name="email"><br>

    <input type="checkbox" name="email"><br>

    <input type="checkbox" name="email"><br>

    <input type="checkbox" name="email"><br>

  </body>

</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】Camera 使用浅析

    Camera的简单使用浅析 由于最近工作上用到android.hardware.Camera这个类,于是简单的学习了一些基本用法. 首先注意:Camera这个类在API21以后就不推荐使用了,官方提供 ...

  2. wordpress和普通网页如何使用百度分享组件

    百度分享组件是什么?摘自百度百科: 百度分享是一个提供网页地址收藏.分享及发送的WEB2.0按钮工具,网站的浏览者可以方便的分享到人人网.分享到开心网.分享到QQ空间.分享到新浪微博等一系列SNS站点 ...

  3. angularjs学习总结 详细教程（转载）

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  4. Android Activity返回键控制的两种方式

    Android Activity返回键监听的两种方式 1.覆写Activity的OnBackPressed方法 官方解释: Called when the activity has detected ...

  5. MFC抓网页

    CString chinachar_str("读取的东西:"); CInternetSession sion(NULL,); CHttpFile *http=NULL; CStri ...

  6. Java魔法堂：类加载机制入了个门

    一.前言 当在CMD/SHELL中输入 $ java Main<CR><LF> 后,Main程序就开始运行了,但在运行之前总得先把Main.class及其所依赖的类加载到JVM ...

  7. 30天C#基础巩固-----多态，工厂模式

         自己要有自信,相信自己可以找到好的工作.面对校招,企业更加看重自己的基础,这30天就把C#的基础好好的复习,学习下.笔记一定要认真的记录,这样自己复习回顾的时候就有了可以参考的东西了. 一: ...

  8. 自己写的一个简单的jQuery提示插件

    代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = &qu ...

  9. Web端权限管理新增实用功能：批量增加操作，简单方便快速！

    扩展了吉日嘎拉的Web端权限管理功能后,每次添加菜单倒没啥问题,毕竟菜单的数量有限,可是每增加一个模块.功能或者说权限控制点,就得针对各种常规操作,新增很多遍. 浪费时间,还容易出错.新增了一个字典表 ...

  10. 【Java每日一题】20161107

    package Nov2016; import java.util.List; public class Ques1107 { public static void main(String[] arg ...