<!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. 用seaborn绘制散点图

    散点图可以显示观察数据的分布,描述数据的相关性,matlibplot也可以绘制散点图,不过我一般优先使用seaborn库的sctterplot()绘制,下面就介绍一下如何用seaborn.scatte ...

  2. 五：request和response的使用

    接着上一篇我们在搞完servlet的终极模式之后,接着就需要对发送的请求做出响应了 在这里,所谓的响应,都是返回页面的语言在浏览器上显示也就是HTML语言,所以返回的结果只有HTML语言才能在浏览器上 ...

  3. 阻塞队列的take、offer、put、add的一些比较

    LinkedBlockingQueue的put,add和offer的区别 最近在学习<<Java并发编程实践>>,有很多java.util.concurrent包下的新类.Li ...

  4. ubuntu无法关机

    在/etc/default/halt 增加下面 INIT_HALT = POWEROFF 另一种方法: I have the same problem and found a solution whi ...

  5. win10安装MySQL5.7.31 zip版

    因为我之前卸载了安装的(msi,exe)格式的MySQL,现在重新安装zip版的MySQL. 1,下载MySQL MySQL下载地址 : https://dev.mysql.com/downloads ...

  6. deepin V20 简易入门指南

    deepin V20 入坑指南 系统安装 入坑第一步自然是先安装系统了,deepin的安装方式很简单只需要一个U盘即可,在官网下载好安装镜像文件,使用官方的启动盘制作工具,开机时选择从U盘启动即可,安 ...

  7. php 把一个数随机分成n份

    $money_total=100; $personal_num=10; $min_money=0.01; $money_right=$money_total; $randMoney=[]; for($ ...

  8. 巧妙使用MindManager图像功能，能够让你的思维导图更精彩

    MindManager是一款多功能思维导图工具软件,有其他软件无法媲美的项目管理和商业规划高级功能.用户们制作思维导图时一定要注意图文并茂,单纯的文字会过于单调.所以接下来,小编就为大家详细介绍Min ...

  9. Macos系统上怎么自动下载任务

    相对于Windows系统来说,好用的Mac下载工具就显得比较少了.Folx作为Mac下载工具中的佼佼者,其自动化下载功能受到很多Mac系统用户的欢迎. 随着高清影视的发展,很多影视资源体动辄就是1-2 ...

  10. react-hash-calendar，移动端日期时间选择插件

    按照惯例,先上效果图 vue 版本同款日历:https://github.com/TangSY/vue-hash-calendar react-hash-calendar 支持手势滑动操作 上下滑动 ...