通过JavaScript 实现简单的全选、不全选的思想

发布时间:2022-07-22 发布网站:https://blog.csdn.net/yzq0820
前端之家收集整理的这篇文章主要介绍了通过JavaScript 实现简单的全选、不全选的思想前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目录

一、思路

我们要做到,选择了全选按钮,让下面的所有的按钮都要勾取。

实现的思路是,全选的按钮是否勾取,勾取后通过for循环来得到每一个按钮,赋值上全选按钮的勾取状态。

展示效果1:

有了全选按钮,实现其他按钮的勾取,我们也要实现,主动勾取完了所有按钮,全选按钮要自动勾取,反之没有勾取完,全选按钮不处于勾取状态

效果展示2:

二、实现效果

1.h5的布局

2.js代码

1.获取元素

2.获取全选,通过循环将选择按钮都赋上选择状态

3.设置,选择按钮全勾选后,全选按钮自动勾取,反之则取消勾取


一、思路

我们要做到,选择了全选按钮,让下面的所有的按钮都要勾取。

实现的思路是,全选的按钮是否勾取,勾取后通过for循环来得到每一个按钮,赋值上全选按钮的勾取状态。

展示效果1:

通过JavaScript 实现简单的全选、不全选的思想

有了全选按钮,实现其他按钮的勾取,我们也要实现,主动勾取完了所有按钮,全选按钮要自动勾取,反之没有勾取完,全选按钮不处于勾取状态

效果展示2:

通过JavaScript 实现简单的全选、不全选的思想

二、实现效果

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 实现简单的全选、不全选的思想全部内容,希望文章能够帮你解决通过JavaScript 实现简单的全选、不全选的思想所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。