小程序开发公司,挑战百日学习计划第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">1td><td>小程序开发：www.zkelm.comtd>tr>
<tr><td><input class="item" type="checkbox">2td><td>企业官网设计：www.zkelm.comtd>tr>
<tr><td><input class="item" type="checkbox">3td><td>公众号开发：www.zkelm.comtd>tr>
<tr><td><input class="item" type="checkbox">4td><td>软件定制：www.zkelm.comtd>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