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培训视频。
JavaScript小例子：复选框全选的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- 复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
随机推荐
- 白话Https
本文试图以通俗易通的方式介绍Https的工作原理,不纠结具体的术语,不考证严格的流程.我相信弄懂了原理之后,到了具体操作和实现的时候,方向就不会错,然后条条大路通罗马.阅读文本需要提前大致了解对称加密 ...
- 15 Best Responsive HTML5 Frameworks 2014
Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...
- Pentaho Kettle 6.1连接CDH5.4.0集群
作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 欢迎转载 最近把之前写的Hadoop MapReduce程序又总结了下,发现很多逻辑基本都是大致相同的,于是想到 ...
- Struts2 源码分析——项目分析
项目知识点分析 从上一章中我们知道了接下来我们要去了解源码的项目(struts2-showcase).而这一章将讲述我三年后在次接触struts2-showcase项目是一个什么样子的情况.我有一个工 ...
- jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 【译】About the Java Technology
About the Java Technology Java technology is both a programming language and a platform. The Java Pr ...
- C#网站发布在IIS10上，Access数据库读取为空白的解决方案
打开IIS10,进入应用程序池,右边“设置应用程序池默认设置”中,启用32位应用程序,False改为True即可.
- Firemonkey ListView 点击事件
Firemonkey ListView 的点击事件一直让人摸不着头绪(各平台触发规则不太相同),因为它提供了点击相关的事件就有如下: OnChange:改变项目触发. OnClick:点击触发. On ...
- PHP旧系统基于命名空间重构经验
命名空间其实只是一个形式,最终目的是重构代码,但这个过程想要一蹴而就是不可能的. 一开始给了一个伪命题:基于ThinkPHP的重构(不要问为什么).经过一段的实践,发现这是一个大错特错的思维方式,其中 ...