《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

相关文章

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,:本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服