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 ...
随机推荐
- 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要系列文章索引
从发表第一篇文章到最后一篇文章,时间间隔有整整一个月,虽只有5篇文章,但每一篇文章都是我吸收<LEARNING HARD C#学习笔记>这本书的内容要点及网上各位大牛们的经验,没有半点废话 ...
- Moon.Orm 5.0(MQL版)分页功能的设计(求指教,邀请您的加入)
一.分页的分类及分析 1)分页的前置条件: 查询的目标条件.第几页.总页数(本质上由查询条件决定).每页条数.请求地址.按照什么字段怎样排序 2)目标结果: 数据列表,List<T>返回 ...
- 大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)
一.拉近我们的距离 我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图: ...
- dp - 2016腾讯笔试 A
2016腾讯笔试 A Problem's Link -------------------------------------------------------------------------- ...
- 【FTP】C# System.Net.FtpClient库连接ftp服务器(上传文件)
如果自己单枪匹马写一个连接ftp服务器代码那是相当恐怖的(socket通信),有一个评价较高的dll库可以供我们使用. 那就是System.Net.FtpClient,链接地址:https://net ...
- Ajax代码简单封装。
function ajax(url, onsuccess, onfail) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest( ...
- 实现了IEnumerable接口的GetEnumerator 即可使用 Foreach遍历，返回一个IEnumerator对象
#region 程序集 mscorlib.dll, v4.0.0.0 // C:\Program Files (x86)\Reference Assemblies\Microsoft\Framewor ...
- datatable删除行
先列出正确的写法,如果你只想马上改错就先复制吧, protected void deleteDataRow(int RowID,DataTable dt) { ; i >= ; i--) { i ...
- 【从API学英语】-DriverManager
原文: The basic service for managing a set of JDBC drivers. NOTE: The DataSource interface, new in the ...
- Debian7编译VIM7.4
[ 另: vim7.4源码在vs2013的编译方法 ] 1 安装libncurses5库: apt-get install libncurses5-dev 2 安装gvim需要的库: 方法一: apt ...