【小案例】全选反选

最新推荐文章于 2024-04-02 19:39:43 发布
最新推荐文章于 2024-04-02 19:39:43 发布
阅读量196 收藏
点赞数
分类专栏： web前端相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39843945/article/details/89454086
版权

1.html代码

<body>
<form method="post" action="">
	你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选
	<br/>
	<input type="checkbox"name="love" value="篮球"/>篮球
	<input type="checkbox"name="love" value="排球"/>排球
	<input type="checkbox"name="love" value="羽毛球"/>羽毛球
	<input type="checkbox"name="love" value="乒乓球"/>乒乓球
	<br/>
	<input type="button" value="全选" id="checkedAllBtn"/>
	<input type="button" value="全不选" 	id="checkedNoBtn"/>
	<input type="button" value="反选" 	id="checkedRevBtn"/>
	<input type="button" value="提交" id="sendBtn"/>
</form>
</body>

2.JS代码

<script type="text/javascript">
	window.function(){
		//获取四个多选框love
		var loves=document.getElementsByName("love");
		//获取全选/全不选的多选框
		var checkedAllBox= document.getElementById("checkedAllBox");
		/* 
			全选按钮
				-点击按钮以后，四个多选框全都被选中
		*/
		 //1.checkedAllBtn
		 //为id为checkedAllBtn的按钮绑定一个单击相应函数
		 var checkedAllBtn=document.getElementById("checkedAllBtn");
		 checkedAllBtn.function(){
		 	//遍历loves
		 	for(var i=0;i<loves.length;i++){
		 		//设置四个多选框变成选中状态
		 		loves[i].checked=true;
		 	}
		 	checkedAllBox.checked=true;
		 };
		 /* 
		 	全不选
		 		-点击按钮后，四个按钮全变成不选的状态
		  */
		  //2.checkedNoBtn
		  var checkedNoBtn=document.getElementById("checkedNoBtn");
		  checkedNoBtn.function(){
		  	//遍历loves2
		  	for(var i=0;i<loves.length;i++){
		  		//设置四个多选框变成非选中状态
		  		loves[i].checked=false;
		  	}
		  	checkedAllBox.checked=false;
		  };
		  /* 
		  	反选
		  		-点击按钮后，四个按钮全变成反选的状态
		   */
		  var checkedRevBtn=document.getElementById("checkedRevBtn");
		  checkedRevBtn.function(){
		  for(var i=0;i<loves.length;i++){
		  	//将checkedAllBox设置为选中状态
			checkedAllBox.checked=true;
		 	//判断多选框状态
		 	/* if(loves[i].checked){
		 		//证明多选框已选中，则设置为没选中状态
		 		loves[i].checked=false;
		 		}
		 	else{
		 		loves[i].checked=true
		 		} */
		 	loves[i].checked=!loves[i].checked;
		 	if(!loves[i].checked){
						//一旦进入判断，则证明不是全选状态
						//将checkedAllOox设置为选中状态
						checkedAllBox.checked=false;
						
						//一旦进入判断，则已经得出结果，不用再 执行循环
				}
		 	};
					
					//判断四个多选框是否全选
					//只要有一个没选中就不是全选
					
					}
		  /* 
		  	提交按钮：
		  		-点击按钮以后，将所有的选中的多选框的value属性值弹出
		   */
		   var sendBtn=document.getElementById("sendBtn");
		   sendBtn.function(){
		   	for(var i=0;i<loves.length;i++){
		   		var yourchoice=document.getElementById("yourchoice");
		   		//判断多选框是否被选中
		  		if(loves[i].checked){
		  			alert(loves[i].value);
		  		}
		  		
		  		
		  	}
		   
		   };
		//当checkedAllBox
		/* 
			全选/全不选多选框
				-当它选中时，其他的也选中，当它取消时其余的也取消
				
			在事件响应函数中，响应函数是给谁 绑定的this就是谁
			 */
		//为checkedAllBox绑定单击响应函数
		var checkedAllBox= document.getElementById("checkedAllBox");
		checkedAllBox.function(){
			
			//设置多选框的选中状态
			for(var i=0;i<loves.length;i++){
				//loves[i].checked=checkedAllBox.checked;\
				loves[i].checked=this.checked;
			}
		};
		/*  
			如果四个多选框全部选中，则checkedAllBox也应被选中
			如果四个多选框都没被选中，则checkedAllBox也不该被选中
		*/
		//为四个多选框分别绑定点击响应函数
		for(var i=0;i<loves.length;i++){
					loves[i].function(){
					//将checkedAllBox设置为选中状态
					checkedAllBox.checked=true;
					for(var j=0;j<loves.length;j++){
					//判断四个多选框是否全选
					//只要有一个没选中就不是全选
					if(!loves[j].checked){
						//一旦进入判断，则证明不是全选状态
						//将checkedAllOox设置为选中状态
						checkedAllBox.checked=false;
						
						//一旦进入判断，则已经得出结果，不用再 执行循环
						break;
					}
					}
				};
			}
		 
	};
</script>

3.图片展示
在这里插入图片描述

希冀miracle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 UiPath 从下拉列表中选择多个项目
qq_42573109的博客
08-23 1780
使用 UiPath 从下拉列表中选择多个项目 很多时候在设计流程自动化时使用 Web 自动化，我们需要从下拉列表中选择多个项目。 但是我们如何使用 UiPath 实现这一点。 我们只能通过 UiPath 活动来实现这一点。 让我们看看这个任务的实际实现： UiPath 活动名称：选择多个项目 Step1：首先让我们看看有多个项目可供选择的输入，如下所示： Step2：从活动面板中拖放选择多个项目到设计器面板，并指示包含多个项目的下拉列表，如下所示： 现在，当我们选择下拉列表时，让我们
jquery实现全选、反选、取消全部等操作(复选框checkbox)
最新发布
m0_61549984的博客
04-17 1542
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
weixin_65793170的博客
04-02 2275
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
vue实现“全选/全不选/反选”的三个方法
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
02-21 9525
【代码】vue实现“全选/全不选/反选”的三个方法。
复选框&单选框
liusen5555的专栏
08-16 784
复选框全部选中代码： function CheckAll(form) { for (var i=0;i{ var e = form.elements[i]; if (e.Name != "chkAll"&&e.disabled!=true) e.checked = form.chkAll.checked; } } 选中/取消所有 判断是否选中任一复选框代码：function check(){  
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
简单实现全选反选功能（html）
01-07
在网页开发中，全选和反选功能是常见...总结来说，这个案例展示了如何使用HTML和jQuery实现全选/反选功能，以及如何处理用户交互。通过理解并实践这个例子，开发者可以更好地掌握网页中的动态交互设计，提高用户体验。
全选反选
04-11
在IT领域，"全选"和"反选"是用户界面设计中常见的功能，尤其在数据列表或表格显示时，用户通常需要批量选择或取消选择项目。这些操作常见于文件管理器、邮件客户端、数据库应用等。在这个场景下，我们讨论的是如何在...
复选框全选反选取消
06-01
在网页交互设计中，"复选框全选反选取消"功能是常见的一种用户操作，尤其在处理大量数据选择时非常实用。这个功能允许用户通过一个主复选框（通常称为全选框）来一次性选中或取消所有子复选框，也可以单独选择或取消...
三个基于jQuery的JS复选框全选反选例子
05-12
摘要:脚本资源,jQuery,全选,反选　三个基于jQuery的JS复选框全选反选例子，实用的网页特效，三款例子大同小异。所有checkbox跟着全选的checkbox走，定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，...
简单js实现全选全部选反选效果
11-11
简单js实现全选全部选反选效果
html全选反选
12-06
很简单的html全选反选，适合刚开始学习html的同学，非常实用。
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1031
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
用jQuery实现复选框全选、反选与获取选中的复选框的值
lzy_55的博客
08-29 1904
和js实现的步骤一样，先是实现全选，再是反选，最后创建函数，储存已选中的反选框的值再在全选反选中调用函数。用jQuery实现以上效果要比js简单的多。
全选与反选
weixin_52163042的博客
12-28 980
全选与反选 具体要求如下： 1）根据数据创建表格； 2）表格在页面中距离上面100像素、水平居中并且其每行内的内容也居中,单元格的高度是：40像素； 3）创建反选按钮并放入表格的下方，按钮的大小为宽：100像素，高：50像素; 4）点击全选按钮则每一项都要选中，如果其中的一项没有选中则全选按钮没有选中 5）点击反选按钮实现反选的功能 <div class="box"> <table> <thead>
JS基础_全选练习
qq_51210812的博客
10-13 72
<script type="text/javascript"> window.onload = function(){ var items = document.getElementsByName("items"); //1.checkedAllBtn /* 全选按钮 点击按钮之后，四个多选框都被选 */ //为id为checkedAllBtn的按钮绑定一个单击响应函数 var checkedAllBtn = d.
JS实现全选/反选
lei_tao123的博客
01-28 344
JS如何实现全选反选 function allSelect(){ if($(&amp;quot;#selectAll&amp;quot;).prop(“checked”)){ KaTeX parse error: Expected '}', got 'EOF' at end of input: … var parentTd=(this).parent(); var tr=parentTd.parent(); var amount...
jQuery、html、JavaScript实现全选、反选、批量删除
拉莫帅的博客
01-07 8034
方式一：重点内容 input type=&quot;button&quot; onclick=&quot;delAll()&quot; value=&quot;批量删除&quot; /&gt; input type=&quot;button&quot; onclick=&quot;che()&quot; value=&quot;全选/反选&quot; /&gt;
5.1 UiPath选择器之页面选择器的介绍和使用
javagril的专栏
11-21 2149
页面选择器的介绍 某些软件程序的布局和属性节点具有易变的值，例如某些Web应用程序。UiPath Studio无法预测这些变化，因此，您可能必须手动生成一些选择器. 每个属性都有一个分配的值。选择具有恒定值的属性很重要。如果每次启动应用程序时属性值都发生变化，那么选择器将无法正确识别元​​素 二、页面选择器在UiPath中的使用 在设计库中新建一个Sequence，为序列命名及设置Sequence...
vue实现全选反选
05-24
在 Vue 中实现全选反选的功能可以通过以下步骤： 1. 在 data 中定义一个变量用来存储列表数据和选择状态，例如： ``` data() { return { items: [ { id: 1, text: 'item 1', selected: false }, { id: 2, text: 'item 2', selected: false }, { id: 3, text: 'item 3', selected: false } ], allSelected: false } } ``` 2. 在模板中展示列表和全选按钮： ``` <template> <div> <button @click="toggleAllSelection">{{ allSelected ? '取消全选' : '全选' }}</button> <ul> <li v-for="item in items" :key="item.id"> <input type="checkbox" v-model="item.selected"> {{ item.text }} </li> </ul> </div> </template> ``` 3. 实现全选反选的方法： ``` methods: { toggleAllSelection() { this.allSelected = !this.allSelected; this.items.forEach(item => { item.selected = this.allSelected; }); } } ``` 以上代码实现了一个简单的全选反选功能，当点击全选按钮时，会将所有列表项的选择状态设置为全选按钮的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值