原生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 ...
随机推荐
- Android Support v4\v7\v13和AndroidX理解【转载】
为什么要用support库呢? 因为在低版本Android平台上开发一个APP时,想使用高版本才有的功能,此时就需要使用Support来支持兼容. 1. android-support-v4 comp ...
- 在Service中创建全局Dialog对话框
需要使用到悬浮窗权限 val builder: AlertDialog.Builder = AlertDialog.Builder(this)builder.setMessage("from ...
- Jmeter 添加 计数器
第一步: 添加 > 配置元件 > 计数器 如下图所示: 第二步: 设置递增值与引用名称 第三步:使用引用名称 第四步:执行脚本,查看结果
- 一个List按照某个size分割为多个小的List
针对于List的size比较大,使用多线程处理任务时,可以将List分割为一个一个比较小的任务单元进行处理. 例如集合大小:645,按照100分割,会将集合分割为6个size为100的集合和一个siz ...
- 每天一个linux命令之stat
[Linux]Linux下使用stat命令所显示出来的三个时间 转 https://blog.csdn.net/pointer_y/article/details/54347968 在linux系统下 ...
- c++11-17 模板核心知识(八)—— enable_if<>与SFINAE
引子 使用enable_if<>禁用模板 enable_if<>实例 使用Concepts简化enable_if<> SFINAE (Substitution Fa ...
- FL Slayer合成器功能之顶部组件介绍
本章节采用图文结合的方式给大家介绍电音编曲软件--FL Studio中的插件FL Slayer合成器中的顶部组件,它是电吉他模拟合成器,感兴趣的朋友可以一起沟通学习交流. FL Slayer(杀手)合 ...
- 会声会影使用教程:剪辑Vlogo短视频
随着抖音.快手等视频分享软件的兴起,很多人已经开始尝试制作短视频分享.那么,对于视频制作新手来说,短视频的制作难度大吗?其实,只要选对了视频制作软件,视频制作将会变得相当简单. 在众多视频制作软件中, ...
- 清理工具CleanMyMac如何帮助用户清空DNS缓存
什么是DNS缓存?这个缓存有什么危害?相信大家平时使用浏览器时,有时候会遇到一个很奇怪的问题,就是Mac打开许多网站如百度网站,都是可以访问的,但是在打开某个特定网站时,却发现浏览器提示检测不到网络连 ...
- 基于Python+requests搭建的自动化框架-实现流程化的接口串联
框架产生目的:公司走的是敏捷开发模式,编写这种框架是为了能够满足当前这种发展模式,用于前后端联调之前(后端开发完接口,前端还没有将业务处理完毕的时候)以及日后回归阶段,方便为自己腾出学(mo)习(yu ...