纯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来实现以上内容，敬请期待~