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

本文链接：https://blog.csdn.net/zkelm/article/details/107224769

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

最近公司又签下几单，我又可以偷时间出来学习一下，真香
小程序签约：www.zkelm.com
我就是要把前端学完，然后在学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>

显示结果，如下：
企业官网设计：www.zkelm.com

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;
     }
 }

显示同步：
小程序开发：www.zkelm.com
软件定制：www.zkelm.com

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;
			}
		}