JS实现全选和全不选
小余努力搬砖 人气:0一、思路
我们要做到,选择了全选按钮,让下面的所有的按钮都要勾取。 实现的思路是,全选的按钮是否勾取,勾取后通过for循环来得到每一个按钮,赋值上全选按钮的勾取状态。
展示效果1:
有了全选按钮,实现其他按钮的勾取,我们也要实现,主动勾取完了所有按钮,全选按钮要自动勾取,反之没有勾取完,全选按钮不处于勾取状态 效果展示2:
二、实现效果
1.h5的布局
主要由复选框构造一个全选按钮,在使用ul设置其他的选择按钮 复选框:checkbox
css的布局 简单的删除li前面的默认样式。
<style> li{ list-style: none; } </style>
<input type="checkbox" id="selectAll">我的爱好 <ul class="ckboxs"> <li><input type="checkbox">唱歌</li> <li><input type="checkbox">打球</li> <li><input type="checkbox">跳舞</li> <li><input type="checkbox">跑步</li> <li><input type="checkbox">画画</li> </ul>
2.js代码
1.获取元素
let selectAll = document.querySelector('#selectAll'); let ckboxs = document.querySelectorAll('.ckboxs input');
2.获取全选,通过循环将选择按钮都赋上选择状态
selectAll.onclick=function(){ // 全选按钮的状态 let state = selectAll.checked; //循环每一个ckboxs,为全选状态 for(let i=0;i<ckboxs.length;i++){ ckboxs[i].checked=state; }
3.设置,选择按钮全勾选后,全选按钮自动勾取,反之则取消勾取
for(let i=0;i<ckboxs.length;i++){ ckboxs[i].onclick=function(){ //默认都勾取 let flag = true; for(j=0;j<ckboxs.length;j++){ if(ckboxs[j].checked==false){ //如果checked如果有一个没选上就是false flag=false; } } selectAll.checked=flag; } }
附:JavaScript实现全选、不选、反选功能完整实例
点击全选按钮,下面的列表项会被全部选择;
点击不选按钮,选项全部取消选择;
先在列表中选择几项,再点击反选按钮,之前被选择的会取消选择,之前没被选择的会变成选择状态。
下面是实现代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hh</title> <script type="text/javascript"> window.onload=function(){ var oBtn1=document.getElementById('btn1'); var oBtn2=document.getElementById('btn2'); var oBtn3=document.getElementById('btn3'); var oDiv=document.getElementById('div1'); var oCh=oDiv.getElementsByTagName('input'); oBtn1.onclick=function() { for (var i = 0; i < oCh.length; i++) { oCh[i].checked=true; } }; oBtn2.onclick=function() { for (var i = 0; i < oCh.length; i++) { oCh[i].checked=false; } }; oBtn3.onclick=function() { for (var i = 0; i < oCh.length; i++) { if (oCh[i].checked==true) oCh[i].checked=false; else oCh[i].checked=true; } }; }; </script> </head> <body> <input id="btn1" type="button" value="全选"> <input id="btn2" type="button" value="不选"> <input id="btn3" type="button" value="反选"><br> <div id="div1"> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> <input type="checkbox" ><br> </div> </body> </html>
总结
加载全部内容