纯js实现复选框的全选、反选与获取选中复选框的值

实现效果如下：

全选状态：

取消全选：

获取选中的复选框的值：

下面开始上代码！

html

<div><h2>爱好</h2><hr><form action="#" method="GET"><input type="checkbox" id="all">全选<br><input type="checkbox" value="打游戏">打游戏<input type="checkbox" value="听歌">听歌<input type="checkbox" value="阅读">阅读<input type="checkbox" value="跑步">跑步<input type="checkbox" value="睡觉">睡觉</form><div>当前选中的爱好：<span></span></div>
</div>

css

<style>span{font-weight:600;}
</style>

js

<script>//获取全选框var _all=document.querySelector("#all");//获取所有反选框var _inps=document.querySelectorAll("input:not(#all)");//获取反选框值的文本处var _span=document.querySelector("span");//全选_all.onclick=function(){//获取全选的状态var status=_all.checked;//保证全选框的checked与反选框一致_inps.forEach(function(tag){tag.checked=status;})//调用函数chText();}//反选_inps.forEach(function(tag){//点击每一个反选框tag.onclick=function(){//过滤出当前已经选中的所有反选框var _chbox=Array.from(_inps).filter(function(obj){return obj.checked==true;})//如果选中的反选框的个数=所有反选框的个数，全选框的选中状态就位true_all.checked=_chbox.length==_inps.length;//调用函数chText();}})//创建获取选中反选框值的函数function chText(){//创建一个空数组来存储反选框的值var ary=[];//遍历所有反选框_inps.forEach(function(item){//将选中的反选框的值累加到数组里if(item.checked==true){ary.push(item.value);}})//将数组里面的值赋到文本处_span.innerHTML=ary;}
</script>

以上就是纯js实现复选框全选、反选以及获取选中的复选框值的过程。

码字不易，有帮助的话点个赞吧！~

下一篇将用jQuery来实现以上内容，敬请期待~

纯js实现复选框的全选、反选与获取选中复选框的值相关推荐

php 获取下拉框选中的文本,jQuery如何获取select选择的文本与值？（代码示例）...
本篇文章给大家带来的内容是关于jQuery如何获取select选择的文本与值,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 获取select : 获取select 选中的 text ...
html复选框代码隐藏勾勾,[译] 为什么 HTML 中复选框样式难写 — 本文给你答案
在当今世界,大多数网页开发者认为掌握 JavaScript 是优先选择,这理所当然,因为 JS 是浏览器脚本语言 .虽然 HTML 和 CSS 决定网站的样式,但是 JS 凭借它能调用 HTML 和 ...
CAD6:1.如何选择对象(批量选择、反选、筛选、栏选、)、2.删除工具的使用、3.如何显示图形
1.如何选择对象鼠标点击一下空白处往右移动完全蓝框住对象即可选择对象鼠标点击一下空白处往左移动不完全绿框住对象即可选择对象筛选出被选对象 shift+鼠标往左移动被蓝框选中或者鼠标单独选择 ...
js复选框之全选反选不选
今日分享:纯js复选框之全选&&反选&&不选想要了解其用法,首先先得了解它们各自的意思全选:全部都选中反选:选中的部分取消,没选中的部分勾选上不选:全部取消勾选 ...
js实现复选框的全选、取消全选、反选
思路很简单: 全选:将所有复选框的checked设置为true 取消全选:将所有复选框的checked设置为false 反选:将所有选中的复选框设置为false,未选中的设置为true.即将check ...
【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
元素的选中问题元素选中的问题切换复选框选中全选和全不选
元素的选中问题 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
jQuery实现复选框的全选和反选：
jQuery实现复选框的全选和反选: 截图如下: 代码如下: index.jsp: <%@ page language="java" import="java.ut ...
php 复选框全选和取消,基于JavaScript实现复选框的全选和取消全选
这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考, ...

纯js实现复选框的全选、反选与获取选中复选框的值

实现效果如下：

下面开始上代码！

html

css

js

纯js实现复选框的全选、反选与获取选中复选框的值相关推荐

最新文章

热门文章