广西小程序开发公司: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