原生js获取页面所有的checkbox
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="杨欣">
<title>获取页面所有的checkbox</title>
</head> <body>
<input type="checkbox" name="box1" id="box1">box1
<input type="checkbox" name="box2" id="box2">box2
<input type="checkbox" name="box3" id="box3">box3
<input type="checkbox" name="box4" id="box4">box4
<input type="checkbox" name="box5" id="box5">box5
<input type="checkbox" name="box6" id="box6">box6
<script>
var inputs = document.getElementsByTagName("input");
var boxs = [];
for (let i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
boxs.push(inputs[i])
}
}
console.log(boxs)
</script>
</body> </html>
原生js获取页面所有的checkbox的更多相关文章
- 原生js获取页面中所有checkbox
var inputs = document.getElementsByTagName("input");//获取所有的input标签对象 var checkboxArray = [ ...
- 原生js获取到页面上所有的checkbox
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- JS获取页面数据执行Ajax请求
下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", fun ...
随机推荐
- 【涂鸦物联网足迹】API及SDK介绍
前序系列文章>>> [涂鸦物联网足迹]物联网主流通信方式 我们系列文章,都会围绕如何完成一款智能"隔空接吻机"的开发.希望能帮到各异地恋or异国恋的情侣们! 本文 ...
- python之《线程与进程》
多线程的应用场景 不适用cpu操作密集型任务, 适合io操作密集型任务 同一进程中的数据是互通的,因为python多线程是假多线程,我们要用到多核就需要开多个进程来实现,但是坏处是数据不能互通 线程: ...
- PID算法终于弄明白原理了，原来就这么简单
看起来PID高大尚,实则我们都是被他的外表所震撼住了.先被别人唬住,后被公式唬住,由于大多数人高数一点都不会或者遗忘,所以再一看公式,简直吓死.了解了很浅的原理后,结果公式看不懂,不懂含义,所以最终没 ...
- Dubbo 服务导出-Version2.7.5
1.源码分析 1.1分析服务导出入口 当容器为spring是dubbo会为容器注册两个监听器:DubboLifecycleComponentApplicationListener和DubboBoots ...
- Windows上Jenkins插件下载慢解决方法
替换文件内容 Jenkins/updates/default.json 替换 updates.jenkins-ci.org/download 为 mirrors.tuna.tsinghua.edu.c ...
- CSS3之flex布局
若要使用flex布局,需在父元素上声明" display : flex ",这样它所有的直系子元素就成为flex元素 1.居中 1)垂直居中:align-items : cente ...
- C#设计模式-外观模式（Facade Pattern）
引言 在软件测试中,一般都是在功能测试稳定的情况下再进行UI自动化测试.或者进行性能测试.如果一个一个进行太麻烦,此时可以使用对外提供一个简单接口,通过这个接口可以访问内部一群接口.例如进行UI自动化 ...
- JavaSE 学习笔记07丨IO流
Chapter 13. IO流 13.1 File类 java.io.File类是文件(file)和目录(文件夹)(directory)路径名(path)的抽象表示,主要用于文件和目录的创建.查找和删 ...
- MindSpore手写数字识别初体验，深度学习也没那么神秘嘛
摘要:想了解深度学习却又无从下手,不如从手写数字识别模型训练开始吧! 深度学习作为机器学习分支之一,应用日益广泛.语音识别.自动机器翻译.即时视觉翻译.刷脸支付.人脸考勤--不知不觉,深度学习已经渗入 ...
- 10种CSS3实现的loading动画，挑一个走吧？
这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...