<!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的更多相关文章

  1. 原生js获取页面中所有checkbox

    var inputs = document.getElementsByTagName("input");//获取所有的input标签对象 var checkboxArray = [ ...

  2. 原生js获取到页面上所有的checkbox

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  3. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  4. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  5. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  6. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  7. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  8. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  9. JS获取页面数据执行Ajax请求

    下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", fun ...

随机推荐

  1. 3. Hive相关知识点

    以下是阅读<Hive编程指南>后整理的一些零散知识点: 1. 有时候用户需要频繁执行一些命令,例如设置系统属性,或增加对于Hadoop的分布式内存,加入自定的Hive扩展的Jave包(JA ...

  2. MyBatis动态Sql之if标签的注意事项

    if标签的test属性必填,该属性值是一个符合OGNL要求的判断表达式,一般只用true或false作为结果. 判断条件property != null 或 property == null,适用于任 ...

  3. centos6 virbox安装

    yum install kernel-devel yum update kernel* wget http://download.virtualbox.org/virtualbox/debian/or ...

  4. MySQL时间类型datetime、bigint及timestamp的查询效率

    前期数据准备 通过程序往数据库插入 50w 数据 数据表: CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `time_dat ...

  5. 安装vmware tool

    首先简单介绍一下vmware tool的作用: 1.最大的好处是可以直接把windows界面的文件拖进linux虚拟机内. 2.鼠标可以直接从虚拟机移动到windows等等好处. 步骤 1.点击虚拟机 ...

  6. 查询osd上的pg数

    本文中的命令的第一版来源于国外的一个博客,后面的版本为我自己修改的版本 查询的命令如下: ceph pg dump | awk ' /^pg_stat/ { col=1; while($col!=&q ...

  7. CTDB与LVS搭建集群

    搭建一个采用lvs进行负载均衡的CTDB集群,整个集群的架构是采用如图所示 在上图所示的架构图中,后端采用的集群是我们的存储,集群存储的三个samba服务器的node在作为CTDB的节点的同时,也是运 ...

  8. 文本多行省略号（CSS最优方案）

    Float定位溢出隐藏 优点: 纯CSS实现,性能好,不用js调优 兼容性高 多行省略,自动显示 缺点: 单词截断 代码如下: <div class="ellipses-div&quo ...

  9. python杂乱知识点

    1. =  == is =: ==:比较 值是否相等 is:比较,比较的是内存地址 2. id(内容):得到内容的起始内存地址 3.数字,字符串,存在小数据池的概念,如果如果创建了一样的数字或者字符串 ...

  10. Java基础—Java方法的调用

    Java方法的调用个主要有以下几种: 1.调用非静态方法 2.调用静态方法 3.方法与方法之间的调用 (1).静态方法内部调用其他方法 (2).非静态方法内部调用 1.调用非静态方法: 非静态方法的调 ...