getElementsByTagName用法示例之全选，不选，反选

最新推荐文章于 2021-07-03 15:30:06 发布
最新推荐文章于 2021-07-03 15:30:06 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： js 文章标签： javascript 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37302495/article/details/72824585
版权


现如今全选，不选，反选在各大网站中普遍存在，其实是用getElementsByTagName结合JS做成的，下面介绍一下详细做法，顺便把getElementsByTagName用法说一下。

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

</style>
</head>
<body>
<input type="button" id="aa" value="全选" />
<input type="button" id="aa1" value="不选" />
<input type="button" id="aa2" value="反选" />
<div id="bb">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
</body>
<script type="text/javascript">
var quanxuan=document.getElementById("aa");
var buxuan=document.getElementById("aa1");
var fanxuan=document.getElementById("aa2");

var one=document.getElementById("bb");

要把两种input标签区分出来，所以单选框input用一个div包起来，要想选择div中的input必须先选择div

var two=one.getElementsByTagName("input");

            //在这里getElementsByTagName是选择名字为dd的div中的所有input标签

quanxuan.οnclick=function(){
for(var i=0;i<two.length;i++)
{

two[i].checked=true;

                 // two[i]可能有不理解的，[ ]的里面是下标，下标都是从0开始的。two[i]就是说选择下标为  i  的input标签

}
}
buxuan.οnclick=function(){
for(var i=0;i<two.length;i++)
{
two[i].checked=false;
}
}
fanxuan.οnclick=function(){
for(var i=0;i<two.length;i++)
{
if(two[i].checked==true)
{
two[i].checked=false;
}
else
{
two[i].checked=true;
}
}
}
</script>
</html>
流年lh
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
#神仙见了会流泪之#getElementsByTagName的用法
其实我十八，你呢？
07-04 2133
神仙又来流泪了，我们在学习中经常会出现，相同的方法可以有不同的用处，就很容易记混，刚刚我就遇到了这种情况(其实是记得不扎实￣□￣｜｜)，我来整理下getElementsByTagName的方法都有哪些吧(其实我现在了解的就俩。。。) 第一种:通过document对象调用 document.getElementsByTagName(“标签名”) 这种方法是 通过标签名获取一组元素节点对象 第二种:通过具体的元素节点调用 父节点.getElementsByTagName(后代节点) 第二种具体代码如下，第一种应
javascript的getElementsByTagName()方法及案例
以后的23,725天，每一天都是精彩的，现在做，一切还来的及，相信自己！
10-27 2470
getElementsByTagName() 寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。 var elements = document.getElementsByTagName(tagName); var elements = element.getElements
getElementById(), getElementsByName(), and getElementsByTagName()
02-18 864
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签： 1、getElementById()getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。比如说有一个DIV的ID为doci
getElementsByName实例
wjxbj的博客
03-13 155
实例1： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;..
Java Script getElementsByTagName()方法完成的例子
Cici的博客
06-13 425
getElementsByTagName() ：返回带有指定标签名的对象的集合。语法： document.getElementsByTagName(tagname)根据tagname指定的标签名字，返回所有该标签的元素值。 方法返回元素的顺序是它们在文档中的顺序。注意：(1)传递给 getElementsByTagName() 方法的字符串可以不区分大小写。(2)如果把特殊字符串 "*"...
基于JavaScript实现全选、不选和反选效果
10-20
在网页交互中，全选、不选和反选功能是常见的需求，特别是在处理多选列表时。本示例展示了如何使用JavaScript实现这些功能。这里的关键在于理解和操作DOM（Document Object Model）元素，以及掌握JavaScript事件处理...
js实现checkbox全选、不选与反选的方法
12-12
在JavaScript中，实现复选框（checkbox）的全选、不选和反选功能是常见的交互操作，这对于用户界面的可操作性和用户体验至关重要。本文将详细介绍如何通过JavaScript代码实现这一功能，并提供相应的HTML和JavaScript...
js实现checkbox全选和反选示例
01-19
复选框全选示例 代码如下:<input type=”checkbox” name=”selectall” value=on onclick=”selectAll()”> function selectAll(form) { var obj = document.getElementsByName(‘selectall’); var cks = ...
javascript实现复选框全选或反选
10-20
在代码中，首先通过`getElementsByTagName`获取了页面上所有的`input`标签元素，然后通过索引访问的方式分别获取了全选复选框、反选链接和全选复选框旁边的标签。这种方式可以减少对DOM的操作次数，提高程序性能。 ...
用getElementsByName实现全选、反选、全不选
郭晓湉
03-04 943
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> GetElementsByName 选项一 选项二 选项三 选项四 选项五 function a() {var t= document.getElementsByNam
使用getElementsByName实现多选，反选，全选
defined_的博客
07-03 182
代码如下： <html> <head> <scripttype="text/javascript"> functioncheckAll(){ varhobbies=document.getElementsByName("hobby"); for(vari=0;i<3;i++){ hobbies...
html dom反选,DOM操作案例之--全选与反选
weixin_39746794的博客
07-02 211
全选与反二，都过发宗发数前业很断屏击和公图使分近选在表单类的项目中还是很常见的，电商项目中的购物车一定少不了这个能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标功能。下面我只就朋不功事做时次功好来多这开制的请一例农在用一个简单的案例做个演示吧是能览调不页新代些事几求事都时学下是事。商品价格小米手机2000ThinkPad5000iPhone75000iPhoneX90...
《JavaScript学习笔记四》：getElementsByTagName的使用以及全选、反选和取消功能实现
wojiushimogui的博客
05-29 2111
《JavaScript学习笔记四》：getElementsByTagName的使用以及全选、反选和取消功能实现我们都知道getElementById是通过id来获取对象，但是，当我们的对象许多且这些对象都是相同的时候，如果还使用getElementById来一个一个的来获取对象就比较坑爹了，是吧，因此，就有了getElementsByTagName来通过标签来获取对象数组。例如：var aBtn=d
Html之getElementById()方法&getElementsByTagName()方法示例
長い冬が越さなければ春が来ない。
11-20 3504
HTML DOM 对象 - 方法和属性一些常用的 HTML DOM 方法：getElementById(id) - 获取带有指定 id 的节点（元素）appendChild(node) - 插入新的子节点（元素）removeChild(node) - 删除子节点（元素）一些常用的 HTML DOM 属性：innerHTML - 节点（元素）的文本值parentNode - 节点（元素）的父节点ch
getElementsByTagName的用法
yongyonglsy的专栏
06-12 564
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;New Document &lt;/TITLE&gt; &lt;scriptlanguage=javascript&gt; functionck() { var aa =document.getElementsByTagName("input"); var ss =""; alert(&quo
javascript当中getElementsByTagName的用法
mark_to_win的专栏
03-21 386
例 6.3：getElementsByTagName()IEFF.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <meta http-equiv="content-type" content="text/html; ch...
getElementsByTagName的用法（附实例）
热门推荐
“夜光寒”的博客
06-25 1万+
概述：getElementsByTagName可以根据你指定的参数，找出html源码中或xml内所有标签名称等于该参数的元素．比如你提供的参数是div,那么getElementsByTagName将返回html中所有div元素．你也可以将getElementsByTagName运行在任何节点元素下，找出该元素下所有标签名称等于其参数的元素．例如你可以在ul下查找所有的li元素，或者在table
getElementsByTagName 用法
weixin_43918196的博客
08-16 1971
表格全选 全不选 反选怎么做
最新发布
05-09
在 HTML 中，可以使用 `<table>` 标签来创建表格。要实现表格的全选、全不选和反选功能，需要使用 JavaScript，并在 HTML 中添加相应的事件处理函数。 以下是一个示例代码，实现了表格的全选、全不选和反选功能： ```html <!DOCTYPE html> <html> <head> <title>Table Selection</title> <script> function selectAll() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = true; } } } function unselectAll() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = false; } } } function invertSelection() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = !checkboxes[i].checked; } } } </script> </head> <body> <table> <thead> <tr> <th><input type="checkbox" onclick="selectAll()">全选</th> <th><input type="checkbox" onclick="unselectAll()">全不选</th> <th><input type="checkbox" onclick="invertSelection()">反选</th> <th>名称</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品1</td> <td>100</td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品2</td> <td>200</td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品3</td> <td>300</td> </tr> </tbody> </table> </body> </html> ``` 在上述代码中，使用了三个 JavaScript 函数分别实现了全选、全不选和反选功能。这三个函数分别被绑定到了表格头部的三个复选框的 onclick 事件上。 其中，selectAll() 函数将所有复选框的 checked 属性设置为 true，unselectAll() 函数将所有复选框的 checked 属性设置为 false，invertSelection() 函数将所有复选框的 checked 属性取反。 在 HTML 中，使用了一个表格，其中表头的前三列分别是“全选”、“全不选”和“反选”三个复选框。在表格的 tbody 中，每一行都包含一个复选框，用来选择该行对应的商品。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值