利用JavaScript实现简单全选和全不选的思路和方法
更新时间：2022年07月22日 09:01:55 作者：小余努力搬砖
最近开始练习js的基本操作,常常因为一些小疏忽导致页面效果无法实现,下面这篇文章主要给大家介绍了关于利用JavaScript实现简单全选和不全选的思路和方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
一、思路
我们要做到，选择了全选按钮，让下面的所有的按钮都要勾取。 实现的思路是，全选的按钮是否勾取，勾取后通过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>总结
到此这篇关于利用JavaScript实现简单全选和全不选的思路和方法的文章就介绍到这了,更多相关JS实现全选和全不选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章给大家分享了关于json前后端数据交互方法实现的相关知识点内容，有兴趣的读者们可以参考学习下。2018-09-09
有时候我们需要动态的加入适合的js，因为有时候不需要将所有的js都加载进来，以来提高效率，但这种方法比较适合单个js文件比较大的情况2009-05-05
这篇文章主要介绍了在css加载完毕后执行后续代码的方法,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了js图片模糊切换显示特效的方法,涉及js操作图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
最近发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug。所以这篇文章主要给大家介绍了关于js中this的指向问题的相关资料，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了js 实现依赖注入的思想，后端框架思想搬到前端来,需要的朋友可以参考下2015-08-08
下面小编就为大家带来一篇lhgcalendar时间插件限制只能选择三个月的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
其实这个效果不是什么难实现的效果，关键注意几个地方就可以了2011-04-04
这篇文章主要介绍了JavaScript常见JSON操作,简单描述了json的概念、常见json类型,并结合实例形式分析了json的序列化、转换、格式化、解析等相关操作技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了小程序跳转H5页面的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论