javascript 经典案例 全选 不选 反选

最新推荐文章于 2022-01-17 17:26:44 发布
最新推荐文章于 2022-01-17 17:26:44 发布
阅读量87 收藏
点赞数
原文链接：https://my.oschina.net/czyandy/blog/692268
版权 
<title>规范：全选 不选  反选</title>
<script>
window.onload=function (){

   var oBtn1=document.getElementById("Btn1");
   var oBtn2=document.getElementById("Btn2");
   var oBtn3=document.getElementById("Btn3");
   var oDiv=document.getElementById("Ben");
   var oInp=oDiv.getElementsByTagName("input");
   
   oBtn1.onclick=function(){     //全选
	    //oInp[0].checked=true;   // checked ： 布尔值  false  true;
	     for(var i=0; i<oInp.length ; i++){
	     oInp[i].checked=true;	
		}  
   }; 
   oBtn2.onclick=function(){    //不选
		for(var i=0; i<oInp.length ; i++){
		      oInp[i].checked=false;
		}  
   };   
   oBtn3.onclick=function(){    //反选
		for(var i=0; i<oInp.length ; i++){
		    if(oInp[i].checked==true){
			
			    oInp[i].checked=false;
			}
			else{
			    oInp[i].checked=true;
			}
		}  
   };
};

</script>
</head>
<body>

<input id="Btn1" type="button" value="全选" /><br />
<input id="Btn2" type="button" value="不选" /><br />
<input id="Btn3" type="button" value="反选" /><br />
<div id="Ben">
<input type="checkbox"  /><br />
<input type="checkbox" /><br />  <!--复选框   checked  选中-->
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>

转载于:https://my.oschina.net/czyandy/blog/692268

chihuo2428
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单js实现全选全部选反选效果
11-11
简单js实现全选全部选反选效果
jquery全选反选全不选案例
04-04
jquery实现全选反选全不选案例，在入场网页开发中实现。
js的全选案例
我们仨
05-18 386
参考文章： 1.https://www.cnblogs.com/biehongli/p/5916214.html 2.https://blog.csdn.net/big_data1/article/details/79084879 需求分析： 1.点击全选框，所有选项被选中； 2.全选情况下，再次点击全选框，所有选项都不选； 3.全选情况下，取消某一个或几个子选项，全选框变为不选中； ...
用JavaScript实现全选-反选
weixin_43939158的博客
12-25 252
实现全选-反选 在日常生活我们会遇到需要全选-反选的地方，其实用JavaScript也能实现。 样式如下所示： 样式代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
js 实现全选、全不选、反选功能
热门推荐
wolinxuebin的专栏
05-30 1万+
不多说，直接上代码，复制直接可以使用 无标题文档 function selectAllNullorReserve(obj,type){ if(obj!=null&&obj!=""){ if(document.getElementsByName(obj)!=undefined&&document.getElementsByName(obj).length>0){ //getE
javascript实现全选反选功能
qq_34928693的博客
08-17 298
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js小练习——页面实现重置、反选、全选三个按钮的功能
weixin_34066347的博客
04-24 258
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面上有10个多选框，实现三个按钮(重置、反选、全选)功能</title></head><body><input type="checkbox"&gt...
JavaScript案例——05全选和全不选
weixin_44364634的博客
01-17 157
1.1 css实现效果图 2.1 方法一 <p><input type="checkbox" name="people" id="">尼古拉斯·赵四</p> <p><input type="checkbox" name="people" id="">莱昂纳多·刘能</p> <p><input type="checkbox" name="people" id="">约翰尼·宋小宝</p> &l
javascript总结41:表格全选反选,经典案例详解
anjiye7641的博客
05-08 95
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; ...
jQuery 全选 全部选 反选 实现代码
10-21
上次做了一个前端项目，其中有功能要求实现jquery 全选和反选功能，下面小编抽个时间把实现代码分享到脚本之家平台供大家参考下
基于JavaScript实现全选、不选和反选效果
10-20
在网页交互中，全选、不选和反选功能是常见的需求，特别是在处理多选列表时。本示例展示了如何使用JavaScript实现这些功能。这里的关键在于理解和操作DOM（Document Object Model）元素，以及掌握JavaScript事件处理...
全选不选反选jquery
05-20
"全选不选反选"是网页表单中常见的功能，用户可以通过点击一个按钮实现对复选框的批量选择、取消选择或者反向选择。在jQuery中实现这一功能，主要涉及DOM操作、事件处理和数组方法。 首先，我们需要理解DOM...
300ssm_jsp_mysql 记账管理系统.zip（可运行源码+sql文件+文档）
06-28
管理员需要配置的功能模块如下： （1）系统用户管理，管理员能够对系统中存在的用户的信息进行合理的维护操作，可以查看用户的信息以及在线进行密码的更换； （2）用户管理，管理员可以对该系统中用户进行管理，这个模块主要针对企业中的员工用户，管理员能够对这类的用户信息进行线上化的维护管理； （3）财务管理，该模块是整个系统的核心模块内容，在该模块的设计上，是通过对用户输入的收入、支出情况进行完整的内容查看，并且能够在线新增财务信息。 （4）财务统计，在财务统计的功能模块中，管理员可以看到当前所有用户累计的财务支出以及收入的情况，可以实现有效的数据统计工作。 本次的系统业务设计上是通过B/S结构来进行相应的管理系统搭建的。通过MVC三层框架结构来对整个系统中的不同功能模块实现分层的开发。在整个开发的过程中通过对不同的角色用户进行不同的功能权限的分配来对整个系统进行完整的设计。通过对不同的记账管理系统进行研究分析，了解到当下的记账管理系统普遍在收入、支出的统计上作为系统的核心要素来进行设计，在收支的系统自动统计上也需要进行有效的合理的内容设计。并且不同人员输入的信
一个简单的计数器，带有 2 个多路复用 SSD 和 2 个推送 btns 以递增或复位，使用分层架构在基于 stm32 ARM
06-28
一个简单的计数器，带有 2 个多路复用 SSD 和 2 个推送 btns 以递增或复位，使用分层架构在基于 stm32 ARM 的微控制器上运行
yolov8算法火焰和烟雾识别训练权重+数据集
06-28
yolov8算法火焰和烟雾识别训练权重， 包含15000多火焰和烟雾识别数据集（有网盘链接），数据集目录已经配置好，划分好 train，val, test，并附有data.yaml文件，yolov5、yolov7、yolov8，yolov9等算法可以直接进行训练模型，txt格式标签， 数据集和检测结果参考：https://blog.csdn.net/zhiqingAI/article/details/124230743 数据集配置目录结构data.yaml： nc: 2 names: - fire - smoke
docker python3:10版本 镜像
06-28
docker python3:10 版本 镜像
代码，源代码，购物网站，电子商务，电子商务网站，.net代码，源代
06-28
代码，源代码，购物网站，电子商务，电子商务网站，.net代码，源代码，网站源代码，购物网站源代码，asp.net，asp.net的购物网站，sql2000数据库，vs2010平台，网站制作，网站制作源代码，c#，C#网站，C#购物网站，C#电子商务网站，全套的购物网，电子商务源代码，asp.net购物网站源码，简单的源代码，基本实现购物，实现购物的源代码，适用。1
精通YOLOv5训练：关键技巧与实战指南
最新发布
06-28
YOLOv5是YOLO（You Only Look Once）系列目标检测算法的第五个版本，由 Ultralytics 公司开发。YOLO是一种流行的实时目标检测系统，以其快速和准确的目标检测性能而闻名。YOLOv5是该系列算法中较新的版本，它在速度和准确性上都进行了优化和改进。 YOLOv5的主要特点包括： 1. **速度快**：YOLOv5能够实现快速的目标检测，适用于需要实时处理的应用场景。 2. **准确性高**：与之前的版本相比，YOLOv5在保持高速度的同时，也提高了检测的准确性。 3. **易于使用**：YOLOv5提供了简单的API和配置，使得开发者可以轻松地将其集成到自己的项目中。 4. **多尺度检测**：YOLOv5能够检测不同尺寸的目标，适用于从小型到大型目标的检测。 5. **多任务能力**：除了目标检测，YOLOv5还可以用于其他任务，如图像分类、分割等。 6. **模型泛化能力强**：YOLOv5在多种数据集上都表现出良好的性能，具有很好的泛化能力。 YOLOv5的开发团队提供了预训练模型和训练脚本，使得用户可以快速地在自己的数据集上进行训练和部署。
html全选全不选反选
11-29
以下是HTML中实现全选、全不选和反选的代码示例： 1. 全选效果 ```html <!DOCTYPE html> 全选 <script type="text/javascript"> function selectAll(){ var checkboxes = document.getElementsByName(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值