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. 老鸟谈谈JAVA EE的学习

    老鸟谈谈JAVA EE的学习 因为出差和项目的原因,有将近一个月的时间没有更新博客了,今天终于得闲,和兄弟们分享一下JAVA EE的学习心得.书中带过,直入主题,下面我们首先看看什么是JAVA EE. ...

  2. .net 使用Json(),maxJsonLength属性设置的值问题

    “使用JSON JavaScriptSerializer进行序列化或反序列化时出错.字符串的长度超过了为maxJsonLength属性设置的值” 今天业务找我说线上的国家地区都显示数字(地区ID),而 ...

  3. 解决ios开发中不合法的网络请求地址

    NSString *const kWebsite = @"http://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct ...

  4. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

  5. WinForms 2015V2版本Reports支持更多种条形码！

    Winforms版Reports的条形码引擎从未如此强大.除了支持38种新旧条形码以外,还增添了很多您一定会喜欢的新属性.如果您因此就担心已经在使用的条形码,那么请您放宽心,因为已有的条形码会继续使用 ...

  6. XE7 提交 App（iOS 8）提示「does not contain the correct beta entitlement」问题修复

    XE7 提交 App 后,在「Prerelease」里被提示了: Build 1.0.0 does not contain the correct beta entitlement. For more ...

  7. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  8. sina sae开发中出现的问题

    都是些小问题,但既然出现了,下次就该避免! 网站加载速度慢: 1.安装 Disable Google Fonts 字体插件即可  2.删代码 http://jingyan.baidu.com/arti ...

  9. Lock的实现之ReentrantLock详解

    摘要 Lock在硬件层面依赖CPU指令,完全由Java代码完成,底层利用LockSupport类和Unsafe类进行操作: 虽然锁有很多实现,但是都依赖AbstractQueuedSynchroniz ...

  10. this指针

    this Note:不论是类中的构造函数,还是类中的普通成员函数,内部都隐含一个形参叫this指针,用于接收当前正在构造/调用对象的地址,因此不同的对象被构造/调用时,同一个函数的执行结果不同;对于一 ...