zoukankan      html  css  js  c++  java
  • 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培训视频。

  • 相关阅读:
    异步解决方案----Promise与Await
    多页应用 Webpack4 配置优化与踩坑记录
    左侧固定,右侧自适应的布局方式(新增评论区大佬教的方法)
    精读《Epitath 源码
    如何编写 Typescript 声明文件
    状态码具体解释
    LINQ体验(2)——C# 3.0新语言特性和改进(上篇)
    kafka教程
    double x = 10 ,y = 0;y = x % 2; 这个表达式正确吗?
    mongodb mapreduce使用总结
  • 原文地址:https://www.cnblogs.com/mengdd/p/3151073.html
Copyright © 2011-2022 走看看