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

最新推荐文章于 2024-05-21 18:30:03 发布
最新推荐文章于 2024-05-21 18:30:03 发布
阅读量6k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： 前端 前端面试 JavaScript js DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41637539/article/details/80784043
版权
本文总结了前端面试中的一项常见问题，即如何利用JavaScript原生方法选取页面上所有被选中的checkbox。通过`getElementsByTagName('input')`筛选input元素，再判断其类型为checkbox并检查是否被选中。
摘要由CSDN通过智能技术生成

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

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

HTML代码：

<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value=
最低0.47元/天 解锁文章
叶茂腾
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现checkbox全选
chen254810107的专栏
04-19 775
function checkall(){ var allCheck = $("#allboxs").is("checked");// 取得全选checkbox是否被选中，如果选中为true，未选中为false if(allCheck){ var nameboxs = $("input[name^='boxs']");// 获取name值为boxs的所有input for(i=0; i n
js实现翻页后保持checkbox选中状态的实现方法
01-19
在界面中，使用纯js完成。把选中的checkbox中的id，其中包括模块id，操作id，拼接成一个字符串，然后把字符串传递到action中。 每次调用此页面时，首选调用action中的选中的id字符串，然后根据在id字符串的基
选中div中的全部checkbox
温智星的专栏
04-19 2191
html>body>script language="javascript">function check(field,obj) {var div=field;var ckb=document.getElementsByTagName("INPUT");if(obj.checked){for(i=0;ickb.length;i++){if(ckb[i
原生js多选复选框
最新发布
骨子里的偏爱
05-21 249
【代码】原生js多选复选框。
CheckAll选中时，下面所有的CheckBox都选中
小尘
02-22 734
//CheckBox全选 function checkAll(field) { var selectFlags=document.getElementsByName("selectFlag"); for(var i=0;i&lt;selectFlags.length;i++){ selectFlags[i].checked=field.checked; } } ...
js获取所有选中的checkbox框
youcijibi的博客
01-11 3082
一，遍历所有选中的 var ids = []; $.each($('input[name*="id"]:checked'),function (k,v) { ids.push(v.value); }); if (0 == ids.length) { $.dialog.tips('请选择数据',...
php++js+复选框选中,Js把全部 checkbox 选中
weixin_39824801的博客
03-23 115
批量删除网站记录时，通常要用 js 在客户端把待删除的记录全部选中，再在服务器端把选择的记录都删除。而选中记录一般都是选中记录前的 checkbox 复选框，为易于理解，下面用一个实例具体说明。1、实例 HTML 代码假如有一张产品表格，它是由“产品名称”和“价格”2个字段组成，此外前面还有一个供选中记录的 checkbox；表格的下面还有一个选中所有记录的 checkbox(name="sele...
js 判断checkbox是否选中的实现代码
10-28
大家在很多场合也许会遇到判断页面是否有元素选中，下面介绍的是利用js判断是否选中CheckBox的方法。
javascript获得CheckBoxList选中的数量
10-29
当用户点击时，它会查找`chkBox`内的所有`type=checkbox`的已选中（`:checked`）输入元素，并使用`.size()`方法返回选中项的数量，然后弹出警告框显示这个数量。 另一方面，JavaScript的原生方法虽然没有jQuery那么...
checkbox多项选中及取消选中
01-22
综上所述，实现 `checkbox` 的多项选中及取消选中，需要理解 `checkbox` 的基本用法，掌握JavaScript操作DOM属性的方法，理解 `attr` 与 `prop` 的区别，并灵活运用事件监听和样式控制。通过这些技术，你可以创建出...
jQuery判断checkbox选中状态
10-22
- 要实现全选和全不选的功能，可以遍历页面上所有同名的checkbox（通过`name`属性），并根据已选中数量来设置全选复选框的选中状态。例如： ```javascript var checkboxes = document.getElementsByName('select...
JS获得所有选中的复选框的值
05-27
用JS获得所有选中的复选框的值 input checkbox
js实现全选checkbox
weixin_33801856的博客
08-26 57
js代码 function selectAllCheckBox(parentid) { var PID = document.getElementById(parentid); var cb = PID.getElementsByTagName("input"); for(var i=0;i<cb.lengt...
js实现checkbox全选
liangshui999的博客
07-02 3207
checkbox选中状态主要是靠checked属性控制，js获取设置属性可以直接通过.来控制，或者通过getAttribute()，setAttribute()控制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&l...
原生js实现选中所有的checkbox
weixin_30809173的博客
09-20 580
<div class="con"> <input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('cc');"> 全选 <input name='cc' type='checkbox' value='' > A <input name='cc' type='...
jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
weixin_53444764的博客
12-10 965
一、jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox 1、全选 $("#btn1").click(function(){ $(“input[name=‘checkbox’]”).attr(“checked”,“true”); }) 2、取消全选（全不选） $("#btn2").click(function(){ $(“input[name=‘checkbox’]”).removeAttr(“checked”); }) 3、选中所有奇数 $("#btn3").click(
jquery 中获取所有选中的checkbox的用法
mauersu
03-31 338
源：http://hi.baidu.com/yy3b2007com/item/ee73b8c2e25dc33944941684 评： jquery 中获取所有选中的checkbox的用法 $("input:checkbox[name='the checkbox name']:checked") 或者 $($("table#tbTemplate input[type='che...
CSS常用选择器记录-checkbox被选择
weixin_30533797的博客
08-24 310
input[type=checkbox] 　　用户被勾选 input[type=checkbox]:checked+label2:after input框如果被用户勾选了，其后面的label元素会有相应的样式变化 +是兄弟选择器（sibling combinator），来组合前后两个选择器，选择器中的元素有相同的父元素，并且第二个必须紧随着第一个出现。 <in...
如何实现全选checkbox效果
weixin_30865427的博客
09-18 449
效果图： 简介：当勾选【全选】checkbox时，其余checkbox都要选中，当取消【全选】checkbox时，其余checkbox都要取消。 这一点很容易实现。 但是，当勾选【全选】checkbox时，其余checkbox都要选中，当取消其余checkbox中的任意一项时，【全选】checkbox需要取消勾选。 这一点会有问题，笔者遇到的就是可以取消【...
使用原生JavaScript实现获得CheckBox选中事件的状态
05-28
可以通过以下代码来实现获得CheckBox选中事件的状态： ```javascript const checkBox = document.querySelector('#myCheckBox'); checkBox.addEventListener('change', function() { if(this.checked) { console...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值