小程序开发公司,挑战百日学习计划第36天（js控制全选按钮)

广西小程序开发公司：www.zkelm.com，专注小程序开发，企业oa开发，官网制作

最近公司又签下几单， 我又可以偷时间出来学习一下， 真香

我就是要把前端学完，然后在学js逆向，学ai，之后就是爆发的时候了 。哈哈 真是挺期待， 第一次成立公司，还有活干，非常幸运
今天的主题讲解：用javascript 控制 checkbox得选择 DOM操作

1.首先我们要做一个表格 ，然后把input加进去

<div>
   <table>
		    <tr><th><input type="checkbox" id="selectAll"><label for="selectAll">全选</label></th><th>技能</th></tr>
		    <tr><td><input class="item" type="checkbox">1</td><td>小程序开发：www.zkelm.com</td></tr>
		    <tr><td><input class="item" type="checkbox">2</td><td>企业官网设计：www.zkelm.com</td></tr>
		    <tr><td><input class="item" type="checkbox">3</td><td>公众号开发：www.zkelm.com</td></tr>
		    <tr><td><input class="item" type="checkbox">4</td><td>软件定制：www.zkelm.com</td></tr>
   </table>
</div>

显示结果，如下：

2.控制端 javascript 全选， 全不选

//给全选加入onclick时间
document.getElementById("selectAll").onclick=function(){
     //获取item 的input 集合
     var listitem=document.querySelectorAll(".item");
    //循环获取所有的item 中input 然后加入统一状态 this.selected
    for(var i=0;i<listitem.length;i++){
        listitem[i].checked=this.checked;
     }
 }

显示同步：

3.给item添加onclick 事件，让 1234 四个checkbox都选上的时候 ，就自动给 全选 选上。

   //获取所有的input item可选框
		var listitem=document.querySelectorAll(".item");
		//给每个listitem都加入onclick事件
		for(var i=0;i<listitem.length;i++){
			
			listitem[i].onclick=function(){
				//先定义一个状态标识
				var flag=true;
				//input被点击之后，就检索所有的inputitem集合。如果发现有checked=false 则 修改全选=false
				for(var i=0;i<listitem.length;i++){
					
					if(listitem[i].checked==false){
						flag=false;
					}
				}
				//循环完检索，如果都没有未选择状态，则全选
			    document.getElementById("selectAll").checked=flag;
			}
		}

OK 完工！

我要把layui里面的组件 一个一个的全部用原生做一遍，为什么呢？ 闲的 哈哈！

如果您有小程序要开发的话，可以随时M我 24H在线服务 ，哈哈，今天教程就到这里了， 接下来写一个方案书给别人先.HOHOH

小程序订制：www.zkelm.com

本文地址：https://blog.csdn.net/zkelm/article/details/107224769