选中页面上所有选中的checkbox（使用原生js）

最新推荐文章于 2021-03-23 20:38:07 发布

原创最新推荐文章于 2021-03-23 20:38:07 发布 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端面试 #JavaScript #js #DOM

前端专栏收录该内容

5 篇文章

订阅专栏

本文总结了前端面试中的一项常见问题，即如何利用JavaScript原生方法选取页面上所有被选中的checkbox。通过`getElementsByTagName('input')`筛选input元素，再判断其类型为checkbox并检查是否被选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端面试题小结，使用原生js选择页面上所有选中的checkbox。

使用document.getElementsByTagName(‘input’)只能选中所有的input元素，还需要判断是不是checkbox，是checkbox的话是否选中。实现代码如下

HTML代码：

<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3" checked>
<input type="checkbox" value="4">
<input type="checkbox" value="5" checked>
<input type="txtxarea" value="6">
<input type="checkbox" value="7">
<input type="submit" value="8">

JavaScript代码：

var arr = document.getElementsByTagName("input");
for(let i=0;i<arr.length;i++){
    if(arr[i].getAttribute('type')=='checkbox'&&arr[i].hasAttribute('checked')){
        arr [i].style.float = "right";
    }

}