<!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. Vue+nodejs+npm完美结合入门==vue入门

    因为我的是win7系统 64位 只能下载低版本的nodjs: 传送门:https://nodejs.org/dist/v9.7.1/ 一.使用之前,我们先来掌握3个东西是用来干什么的. npm: No ...

  2. tcpack---1简述

    TCP重传机制 TCP要保证所有的数据包都可以到达,所以,必需要有重传机制. 超时重传机制 一种是不回ack,死等3,当发送方发现收不到3的ack超时后,会重传3.一旦接收方收到3后,会ack 回 4 ...

  3. osd磁盘空间足够无法写入数据的分析与解决

    前言 这个问题的来源是ceph社区里面一个群友的环境出现在85%左右的时候,启动osd报错,然后在本地文件系统当中进行touch文件的时候也是报错,df -i查询inode也是没用多少,使用的也是in ...

  4. centos6安装calamari

    安装操作系统 首先安装操作系统centos6,安装过程选择的是base server,这个不相同不要紧,出现缺少包的时候去iso找出来安装就可以了 calamari的简单介绍 首先简单的介绍下cala ...

  5. 有关线上系统点击没有任何相应得问题思考，主要针对PC端应用程序

    1.问题得起因 前段时间,客户得某些机器上,点击应用系统得快捷方式,没有任何响应,不弹出程序主界面,也没有任何得报错提示,甚至程序得错误日志也没有任何输出. 当时,听说发生这种情况得时候,有点懵了,不 ...

  6. 初识redis协议

    有关redis协议信息(https://redis.io/topics/protocol) 搭建环境 //jedis连接客户端 public class RedisClient { public st ...

  7. Spring中@Translational注解失效场景

    今天面试被问到@Translational注解什么场景下失效,我一脸懵逼,说的恍恍惚惚的,下来我就总结一下@Translational注解失效的场景! @Transactional 注解相信大家并不陌 ...

  8. 小程序后端获取openid (php实例)

    小程序获取openid 首先,小程序授权登录的时候,前端就会获取到code 而后端接收到了code之后,就可以向微信发起请求,获取用户的openid代码如下: <?php $code = $_R ...

  9. 差点跪了！阿里3面真题：CAP和BASE理论了解么？可以结合实际案例说下不？

    本文节选自我开源的 JavaGuide :https://github.com/Snailclimb/JavaGuide (Github标星92k+!一份涵盖大部分 Java 程序员所需要掌握的核心知 ...

  10. Java的比较器Comparable与Comparator

    在Java中有两个比较器:Comparable.Comparator 对于Integer.Double等等类型,可以直接对他们进行比较,因为已经实现了比较的方式,然而在平时常常会面临需要对集合进行排序 ...