首页 > 网络编程 > JavaScript > javascript技巧 > JS实现全选和全不选

利用JavaScript实现简单全选和全不选的思路和方法

2022-07-22 08:47:38 作者：小余努力搬砖

最近开始练习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实现全选和全不选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！