《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现

本文主要是介绍《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现

我们都知道getElementById是通过id来获取对象,但是,当我们的对象许多且这些对象都是相同的时候,如果还使用getElementById来一个一个的来获取对象就比较坑爹了,是吧,因此,就有了getElementsByTagName来通过标签来获取对象数组。

例如:var aBtn=document.getElementsByTagName(“input”);就是获取input下的type=”button”的button对象数组。

还是以一个例子来进行说明:

在我们的生活中,许多网页都存在“全选” “反选” “取消”等功能,下面我们就来实现这一功能。

思路比较简单,
实现代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script>window.onload=function (){//得到所有的button对象var oDiv=document.getElementById('div1');var aBtn=oDiv.getElementsByTagName('input');//得到所有的checkbox对象oDiv=document.getElementById('div2');var aCheckBox=oDiv.getElementsByTagName('input');for(var i=0;i<aBtn.length;i++){aBtn[i].onclick=function (){if(this.value==="全选")  //注意:这里不能写aBtn[i]==="全选"{for(var j=0;j<aCheckBox.length;j++){aCheckBox[j].checked=true;}}else if(this.value==='取消'){for(var j=0;j<aCheckBox.length;j++){aCheckBox[j].checked=false;}}if(this.value==='反选'){for(var j=0;j<aCheckBox.length;j++){if(aCheckBox[j].checked==true){aCheckBox[j].checked=false;}else{aCheckBox[j].checked=true;}}}};  //注意:这里有一个分号}};</script></head><body><div id="div1"><input type="button" value="全选"  /><input type="button" value="反选"  /><input type="button" value="取消"  /></div><div id="div2"><input type="checkbox"  checked="true"/><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></body></html>

在上面的代码实现中,遇到了一个问题,刚开始我在每个按钮的onclick事件中使用了aBtn[i].value====”全选”这样的语句,发现这样是不行的,错误的,只能使用this.value===”全选”,这就涉及到this关键字的使用了,这个以后再说

在debug的过程中,由于一致没有找出这个错误,因此,就写了下面这个版本:每个按钮的onclick都对应一个function。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><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('div2');var aCheckBox=oDiv.getElementsByTagName('input');var len=aCheckBox.length;//全选oBtn1.onclick=function (){for(var i=0;i<len;i++){aCheckBox[i].checked=true;}};//反选oBtn2.onclick=function (){for(var i=0;i<len;i++){if(aCheckBox[i].checked==true){aCheckBox[i].checked=false;}else{   aCheckBox[i].checked=true;}}};//取消oBtn3.onclick=function (){for(var i=0;i<len;i++){aCheckBox[i].checked=false;}};};</script></head><body><input id="btn1" type="button" value="全选"  /><input id="btn2" type="button" value="反选"  /><input  id="btn3" type="button" value="取消"  /><div id="div2"><input type="checkbox"  checked="true"/><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></body></html>

小结

例子虽然简单,但遇到的bug还是挺难让人发现的也,可能还是自己对js了解的不够吧

这篇关于《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/987726

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co