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 ...
随机推荐
- Cordova webapp实战开发：（5）如何写一个Andorid下自动更新的插件？
在 <Cordova webapp实战开发:(4)Android环境搭建>中我们搭建好了开发环境,也给大家布置了调用插件的预习作业,做得如何了呢?今天我们来学一下如何自己从头建立一个And ...
- Theano入门神经网络(二) 实现一个XOR门
与非门的图片如下 示意图 详细解释: 1 定义变量的代码,包括了输入.权值.输出等.其中激活函数采用的是sigmod函数 # -*- coding: utf-8 -*- __author__ = 'A ...
- PHP的数据类型总结
最近开始学习php,下面是我总结的数据类型,画的思维导图: 注意:查看图片要调大浏览器的缩放比例(我也不知道为啥图片上传之后显示这么小,不清晰): 上面太大看不清,我就分别截图:
- JAVA - IDEA快捷键(精简版)
快捷键 功能 Ctrl + Alt + V 对应eclipse ctrl + l + 2 自动补全 Ctrl + Alt + L 对应eclipse ctrl + shift + o 代码格式化 Ct ...
- LeetCode - Balanced Binary Tree
题目: Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced bin ...
- 为html.EditorFor添加样式
有网友问及,怎样为html.EditorFor添加样式. 解决方法,可以参考下面语法: 先new一个htmlAttributes. @model Book @using Insus.NET.Model ...
- <textarea>输入框提示文字
背景 看了过时的资料,花费大把时间,不过也有收获,还是写写吧! 分析 有同学可能想到直接在<textarea>标签内输入帮助文字,但是这又有一个新问题--因为<textarea> ...
- 【C#】添加引用方式抛出和捕获干净的WebService异常
说明:[干净]指的是客户端在捕获WebService(下称WS)抛出的异常时,得到的ex.Message就是WS方法中抛出的异常消息,不含任何“杂质”. 前提:你对WS有编写权.就是说如果你调的是别人 ...
- 紫橙绿蓝的jQuery幻灯片切换
效果展示 http://hovertree.com/texiao/jquery/77/ 看惯了左右切换的幻灯片,何问起向您推荐一个新颖的,旋转切换,通过点击按钮的相应区域可以使幻灯片以旋转的方式来 ...
- Redis系列四之复制
一.复制基本配置与演示 为了避免单点故障,Redis提供了复制功能,可以实现自动同步的过程. 1.配置 同步后的数据分为两类:一类是主数据库(master),一类是从数据库(slave).主数据库可以 ...