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 ...
随机推荐
- 苹果编程语言Swift简介
Swift是什么? Swift是苹果于WWDC 2014发布的编程语言,The Swift Programming Language的原话: Swift is a new programming la ...
- git删除指定文件夹
1.在本地仓库删除指定文件 git rm 文件名名称 2.在本地仓库删除指定文件夹 git rm -r 文件夹/ 3.提交修改 git commit -m"删除文件夹" 4.推送到 ...
- RunLoop 之初探
你好2019!一起努力呀! 1.什么是runloop runloop是通过内部维护的事件循环对事件/消息进行管理的一个对象. 事件循环(Event loop):通俗的解释:没有消息处理的时候,休眠以避 ...
- Tarjan算法初探(3):求割点与桥以及双连通分量
接上一节Tarjan算法初探(2):缩点 在此首先提出几个概念: 割点集合:一个无向连通图G 若删除它的一个点集 以及点集中所有点相连的边(任意一端在点集中)后 G中有点之间不再连通则称这个点集是它的 ...
- 20181031noip模拟赛T1
思路: 我们会发现不合法的位置只有两种情况 要么在前半边,要么在后半边 那么,我们将序列劈两次 使两次的长度分别为: (n为偶数时要特判一下,因为根本不可能) (n/2),(n/2+1) (n/2+1 ...
- Spring MVC中如何解决POST请求中文乱码问题，GET的又如何处理呢
在web.xml中配置过滤器 GET请求乱码解决: 在Tomcat中service.xml中
- 扫描算法（SCAN）——磁盘调度管理
原创 上一篇博客写了最短寻道优先算法(SSTF)——磁盘调度管理:http://www.cnblogs.com/chiweiming/p/9073312.html 此篇介绍扫描算法(SCAN)——磁盘 ...
- 基于 OpenResty 实现一个 WS 聊天室
基于 OpenResty 实现一个 WS 聊天室 WebSocket WebSocket 协议分析 WebSocket 协议解决了浏览器和服务器之间的全双工通信问题.在WebSocket出现之前,浏览 ...
- 关于NODEJS性能测试和优缺点总结
最近公司开发了一套新产品,采用nodejs前端+Java后端框架,为完全的前后端分离结构,以下为相关信息. 软件及功能: 软件 功能 Nginx 负责反向代理和负载均衡 Nodejs 前端代码 JDK ...
- Oracle入门第五天（上）——数据库对象之视图
一.概述 1.什么是视图(VIEW) 视图 从表中抽出的逻辑上相关的数据集合(是一张虚表). 2.为什么使用视图 1.控制访问 2.简化查询 3.视图的分类 二.视图管理 1.创建视图 CREATE ...