• JavaScript小例子:复选框全选


     

    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培训视频。

  • 相关阅读:
    React组件的生命周期
    机器人api
    智能机器人
    已复制该虚拟机 之后需要的处理工作
    在虚拟机上安装CentOS6.5(minimal)
    fastdfs
    redis安装
    FtpClient上传文件异常:java.net.SocketException: Connection reset
    redis的学习笔记
    git命令2
  • 原文地址:https://www.cnblogs.com/mengdd/p/3151073.html
Copyright © 2020-2023  润新知