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

随机推荐

软工之词频统计器及基于sketch在大数据下的词频统计设计
目录摘要算法关键红黑树稳定排序代码框架 .h文件: .cpp文件频率统计器的实现接口设计与实现接口设计核心功能词频统计器流程效果单元测试性能分析性能分析图问题发现解决方案 ...
Linux BLE 基于树莓派
1.参考资料:Linux(RaspberryPi)上使用BLE低功耗蓝牙使用bluez协议栈方法有用 2.Linux下Bluez的编程实现 3.和菜鸟一起学linux之bluez学习记录2 4.BL ...
CentOS 7.0 防火墙操作
CentOS 7.0默认使用的是firewall作为防火墙,之前版本是使用iptables.所以在CentOS 7执行下面命令是无法查看防火墙状态的. [root@localhost ~]# serv ...
Source folder is not on the Java build class path
源文件夹不在Java构建类路径上只需右键单击文件夹src - > build path - >Using source folders就是这样
dispatch 之常见函数小结
你好2019!一起努力呀! 直奔主题 1.dispatch_barrier_async VS dispatch_barrier_sync Barrier blocks only behave spe ...
python 判断是否是润年及函数封装
方法一, 从终端输入一个表示年份的整数,判断是否是闰年,是就打印xxx年是闰年,不是打印xxx年不是闰年 y = int(input('请输入一个年份:')) if (y % 4 == 0 and y ...
Java中方法的多态简析图
代码如下: public class Client{ public static void main(String[] args){ Person p = new Person() ...
jQuery实现导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Error: JAVA_HOME is incorrectly set. Please update F:\hadoop\conf\hadoop-env.cmd解决方法
啥都不说!直接上干货! 打开对应路径下的hadoop-env.cmd 将 set JAVA_HOME=%JAVA_HOME% 更换为绝对路径↓ set JAVA_HOME="E:\Devel ...
Kafka消息系统
一.基本概念 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 首先让我们看几个基本的消息系统术语: Kafka将消息以topic为单位进行归纳 ...

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