html js 全选 反选 全不选源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选，反选按钮</title>
<script type="text/javascript">
window.onload=function(){
/*
*1 #checkedAllBtn
* 2 #checkedBoBtn
* 3 #checkedRevBtn
* 4 #sendBtn
* 5 #checkedAllBox
* 6 #items
* */ var checkedAllBtn = document.getElementById("checkedAllBtn");
//checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBtn.onclick = function(){ //获取四个多选框items
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = true; } //将checkedAllBox设置为选中状态
checkedAllBox.checked = true; }; //全不选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = false; } //将checkedAllBox设置为选中状态
checkedAllBox.checked = false; }; //反选 也要判断是否都需要全部选中
var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items'); checkedAllBox.checked = true; //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = !items[i].checked; if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false; } } }; //提交按钮
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName('items');
//遍历 items
for(var i=0; i<items.length;i++)
{
//判断多选框是否选中
if(items[i].checked){
alert(items[i].value);
}
}
}; checkedAllBox.onclick = function(){
var items = document.getElementsByName('items'); //遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
items[i].checked = this.checked; } }; //items //如果四个多选框全都选中，则checkedAllBox也应该选中
//如果四个多选框都没选中，则checkedAllBox也应该没选中
var items = document.getElementsByName('items');
//为四个多选框分别绑定点击响应函数
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){ //将checkedAllBox设置为选中状态
checkedAllBox.checked = true; for(var j=0 ; j<items.length ; j++){
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
} } };
} } </script>
</head>
<body> <form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选，反选按钮</title>
<script type="text/javascript">
window.onload=function(){
/*
*1 #checkedAllBtn
* 2 #checkedBoBtn
* 3 #checkedRevBtn
* 4 #sendBtn
* 5 #checkedAllBox
* 6 #items
* */
var checkedAllBtn = document.getElementById("checkedAllBtn");
//checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items');
//遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = true;
}
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
};
//全不选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items');
//遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = false;
}
//将checkedAllBox设置为选中状态
checkedAllBox.checked = false;
};
//反选 也要判断是否都需要全部选中
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items');
checkedAllBox.checked = true;
//遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
//通过多选框的checked属性可获取或设置选中状态
items[i].checked = !items[i].checked;
if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
}
}
};
//提交按钮
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName('items');
//遍历 items
for(var i=0; i<items.length;i++)
{
//判断多选框是否选中
if(items[i].checked){
alert(items[i].value);
}
}
};
checkedAllBox.onclick = function(){
var items = document.getElementsByName('items');
//遍历items
for(var i=0;i<items.length;i++)
{
//设置四个多选框变成选中状态
items[i].checked = this.checked;
}
};
//items
//如果四个多选框全都选中，则checkedAllBox也应该选中
//如果四个多选框都没选中，则checkedAllBox也应该没选中
var items = document.getElementsByName('items');
//为四个多选框分别绑定点击响应函数
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for(var j=0 ; j<items.length ; j++){
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
}
}
};
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
html js 全选 反选 全不选源代码的更多相关文章
- 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- checkbook全选/反选/全不选
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 表单Checkbox全选反选全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue实现单选多选反选全选全不选
单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...
- js实现全选,反选,全不选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- WPF DataGrid CheckBox 多选 反选 全选
效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...
- 全选，全不选，反选的js实现
全选练习 ** 使用复选框上面一个属性判断是否选中 - checked属性 - checked=true:选中 ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
随机推荐
- myeclipse安装SVN插件方法
http://www.cnblogs.com/xdp-gacl/p/3497016.html myeclipse安装SVN插件方法 SVM China 源代码托管中心 http://www.svnch ...
- Adapter（适配器）模式
1. 概述: 接口的改变,是一个需要程序员们必须(虽然很不情愿)接受和处理的普遍问题.程序提供者们修改他们的代码;系统库被修正;各种程序语言以及相关库的发展和进化. 例子1:iphone4,你即可以 ...
- Tarjan算法初探(2):缩点
接上一节 Tarjan算法初探(1):Tarjan如何求有向图的强连通分量 Tarjan算法一个非常重要的应用就是 在一张题目性质在点上性质能够合并的普通有向图中将整个强连通分量视作一个点来把整张图变 ...
- HIve安装模式
Hive的安装模式: 1. 嵌入模式:HIve将元信息存储到自带derby数据库中,只能创建一个连接,只用于演示使用 2. 本地模式:元信息被存在Mysql数据库,Mysql数据库与HIve运行在同一 ...
- Cloudera环境搭建
在开发阶段,可以单机搭建环境安装Flume和Solr,在两个工程的官网下载相关文件. 还有另一种更便捷的方式,就是使用Cloudera提供的镜像,包括了已经配置好的各种大数据服务环境的docker镜像 ...
- 【Mac】安装 Homebrew 出错 Failed during: git fetch origin master:refs/remotes/origin/master --tags --force
今天在 Mac 装 Homebrew 遇到了一个问题,在网上找了大量解决方案,做个总结. Mac 版本 High Sierra 10.13.6. 问题描述 在 Mac 终端输入了 Homebrew 官 ...
- python学习笔记（三）：numpy基础
Counter函数可以对列表中数据进行统计每一个有多少种 most_common(10)可以提取前十位 from collections import Counter a = ['q','q','w' ...
- SAP BDC 交货增强无法进入
最近碰到一个问题,使用BDC MODE 'N' UPDATE 'S' 无法进入增强: FV50XF0B_DELIVERY_PUBLISH DELIVERY_PUBLISH_AFTER_SAVE 前台操 ...
- HyperLedger Fabric 1.4 区块链技术原理（2.2）
区块链从字面上理解:数据记录在区块中,通过一定的算法把区块连成一个链. 区块链通过哈希(Hash)算法,生成一串字符串,保存在区块的头部中,一个的区块通过指向上一个Hash值,加入到区块链 ...
- mybatsi中文乱码问题
乱码问题:待总结,这里先贴出网友的博客: http://blog.csdn.net/zht666/article/details/8955952