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 ...

随机推荐

ovs的卸载删除
参考博客1 参考博客2 需要更新.重装ovs时需要先卸载. 删除网桥.端口 ovs-vsctl del-br 交换机名 ovs-vsctl del-port 交换机名端口名(网卡名) 关闭服务 su ...
page_address()函数分析--如何通过page取得虚拟地址
由于X86平台上面,内存是划分为低端内存和高端内存的,所以在两个区域内的page查找对应的虚拟地址是不一样的. 一. x86上关于page_address()函数的定义在include/linux/ ...
前端基础-CSS是什么？
阅读目录一. 什么是CSS 二. 为何要用CSS 三. 如何使用CSS 一. 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式 ...
form组件-字段
Form类创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML 1.Django内置字段如下: Field required=True, 是否 ...
BZOJ 3053: The Closest M Points(K-D Tree)
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1235 Solved: 418[Submit][Status][Discuss] Descripti ...
CentOS6安装各种大数据软件第六章：HBase分布式集群的配置
相关文章链接 CentOS6安装各种大数据软件第一章:各个软件版本介绍 CentOS6安装各种大数据软件第二章:Linux各个软件启动命令 CentOS6安装各种大数据软件第三章:Linux基础 ...
thinkphp+redis实现秒杀，缓存等功能
秒杀是商城常见功能 php+redis是最常见的秒杀功能 1,安装redis,根据自己的php版本安装对应的redis扩展首先查看phpinfo();php环境信息 2,下载redis https ...
mybatis中SQL语句运用总结
union 连接查询连接两个表后会过滤掉重复的值 <resultMap id="BaseResultMap" type="com.sprucetec.pay.e ...
Flume(3)-安装部署
一. 下载 Flume官网地址 http://flume.apache.org/ 文档查看地址 http://flume.apache.org/FlumeUserGuide.html 下载地址 htt ...
有关javaEE及WebGIS的一些地址
jdk:https://www.oracle.com/index.html eclipse:https://www.eclipse.org spring:http://repo.springsourc ...

html js 全选 反选 全不选源代码