JavaScript实现复选框的全选、全不选和反选操作

最新推荐文章于 2020-06-03 11:47:39 发布
最新推荐文章于 2020-06-03 11:47:39 发布
阅读量1.2k 收藏 8
点赞数 3
分类专栏： 前端 文章标签： JavaScript JS实现复选框的全选、全不选、反选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44420955/article/details/88091208
版权

JavaScript实现复选框的全选、全不选和反选操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选全不选操作</title>
	</head>
	<body>
		<b>请选择你的女朋友：</b>&nbsp;
		<input type="checkbox" id="boxid" onclick="selAllNo()"/>全选or全不选</br>
		<input type="checkbox" name="love"/>大乔&nbsp;
		<input type="checkbox" name="love"/>貂蝉&nbsp;
		<input type="checkbox" name="love"/>王昭君&nbsp;
		<input type="checkbox" name="love"/>杨玉环&nbsp;
		<input type="checkbox" name="love"/>小乔&nbsp;
		<input type="checkbox" name="love"/>西施&nbsp;</br>
		<input type="button" value="全选" onclick="selAll()"/>&nbsp;
		<input type="button" value="全不选" onclick="selNo()"/>&nbsp;
		<input type="button" value="反选" onclick="selOther()"/>&nbsp;
		<script type="text/javascript">
			//全选操作
			function selAll(){
				/*
					1.通过name获取当前所有复选框
						-getElementsByName()
					2.返回数组，遍历数组
						-checked=true 选中
						-checked=false 不选中
					3.得到每一个复选框，为每个复选框属性赋值
				*/
			   var love1=document.getElementsByName("love");
			   for(var i=0;i<love1.length;i++){
				   love1[i].checked=true;
			   }
			}
			//全不选操作
			function selNo(){
				var love2=document.getElementsByName("love");
				for(var i=0;i<love2.length;i++){
					love2[i].checked=false;
				}
			}
			//反选操作
			function selOther(){
				/*
					判断复选框属性checked的值
				*/
			   var love3=document.getElementsByName("love");
			   for(var i=0;i<love3.length;i++){
				   if(love3[i].checked==true){
					   love3[i].checked=false;
				   }else{
					   love3[i].checked=true;
				   }
			   }
			}
			//全选or全不选操作
			function selAllNo(){
				/*
					1.获取这个复选框
					2.判断这个复选框属性的值
					3.若是true则全选中，否则全部选中
				*/
			   var box1=document.getElementById("boxid");
			   if(box1.checked==true){
				   selAll();
			   }else{
				   selNo();
			   }
			}
		</script>
	</body>
</html>
Zarathusa
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
jquery实现checkbox的全选和全不选
10-18
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
Js实现复选框的全选、全不选反选功能代码实例
10-15
在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
js实现复选框的全选、全不选和反选
diaoweisang7683的博客
10-22 873
js实现复选框的全选、全不选和反选 主要是用遍历的方法查找元素，然后通过改变checked的属性来选择，为true则是选中状态，为false则是未选状态 实现代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">...
用JavaScript实现复选框的全选、全不选以及反选操作！
程序员·不死宅少
11-18 447
** 用JavaScript实现复选框的全选、全不选以及反选操作！ 演示图片如下： 起始页面效果图 全选页面效果图 全不选页面效果图 反选页面效果图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>全选、全不选以及反选操作</title> &lt...
通过JavaScript来实现复选框全选或全不选的功能
cj彪的博客
05-27 260
判断复选框是否被选中的属性是checked，如果checked属性的值为true，则说明复选框已选中；如果checked属性的值为false，则说明复选框未被选中。可以先将每个复选框的name设置为同名，然后使用getElementByName()方法访问所有同名的复选框，最后使用循环语句来统一设置所有复选框的checked属性，从而实现全选/全不选效果。
js实现复选框全选，全不选及反选
聂小邯
05-28 375
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> //html布局 <input type="button" value="全选" id="all"/&gt...
javaScript实现复选框全选反选事件详解
10-19
复选框全选和反选是网页交互设计中常见的功能，常用于列表操作、表单提交等场景，允许用户一次性选择或取消选择多个选项。文中将通过实例代码展示如何编写全选和反选功能，以及它们的基本工作原理。 首先，全选功能...
javascript实现复选框全选或反选
12-10
以下是用原生js实现的复选框全选/反选的实现，选中checkbox的时候，实现全选的效果，并且样式发生改变。 代码最简洁，js行为优化版，复制粘贴即可使用。 <!DOCTYPE html> <html lang="en"> <head&gt...
复选框全选、全不选和反选的效果实现.rar
07-05
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
用Javascript实现checkbox全选、全不选
zclhlmgqzc的博客
04-16 493
用Javascript实现checkbox全选、全不选
JS实现复选框全选全不选以及子复选框带动全选框的选中
04-26
实现全选全不选反选 并且,如果是在全选状态下将子复选框的选中取消, 那么全选复选框自动取消全选 如果全选复选框没有选中而子复选框全部被选中, 那么全选复选框自动选中全选
JS实现全选反选全不选
06-18
JS实现全选反选全不选
JS实现的全选、全不选及反选功能【案例】
10-17
主要介绍了JS实现的全选、全不选及反选功能,涉及javascript事件响应、元素遍历与属性动态操作相关实现技巧,需要的朋友可以参考下
复选框全选、全不选和反选的效果实现VIEW:1592
umgsai的专栏
08-10 852
650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/attachment/201203/111309893.png" /> html>  head> meta http-equiv="Content-Type" content="text/html; charset=gb2312"> title>复选框全选、全不选
jQuery实现复选框的全选，全不选和反选
睡眠不足z的blog
07-22 209
HTML实现该样式：          实现代码-body中：          请选择您的爱好!         &lt;hr /&gt;         &lt;input type="checkbox"/&gt;足球         &lt;input type="checkbox"/&gt;篮球         &lt;input type="checkbox"/&gt;
实现复选框的操作全选 全不选反选
weixin_46126761的博客
06-03 139
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>你
js实现checkbox全选和全不选代码
墨墨_java进行中...
04-24 954
首先，设置所以你想控制的checkbox的name为一致的，这里设为other js代码如下： var isChecked = true; function addParameterAll(){ var other = document.getElementsByName("other"); if(isChecked){ for(i=0;i<other.lengt
纯javascript实现全选全不选以及反选效果
xiaozhuangyumaotao的博客
05-27 467
纯javascript实现全选全不选效果如下： html代码： <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>单位存款</title> <linktype="text/css"rel="stylesheet"href="normalize.css"/> <linktype="text/css"rel="stylesheet"...
jQuery实现复选框全选、全不选、反选问题解析
我的笔记
05-28 1796
　今天打算用jQuery实现一下复选框的全选、全不选和反选问题，刚开始用的是attr("checked",true/false)方法，发现只能在最开始实现一次全选，可以实现全不选，无法实现反选，总之调试了好久死活得不到想要的效果。最后发现，jquery 1.7.2之前支持attr对固有属性的操作，后面的版本只能用prop了。详细了解jQuery中attr()和prop()的区别，请点击参考。　　下...
JS-复选框的全选与全不选
技术渣的碎片
06-27 275
function selectAll(){ var checklist = document.getElementsByName ("selected"); if(document.getElementById("controlAll").checked){ for(var i=0;i<checklist.length;i++){ checklist[i].checked = 1;
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zarathusa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值