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

一、思路

我们要做到，选择了全选按钮，让下面的所有的按钮都要勾取。 实现的思路是，全选的按钮是否勾取，勾取后通过for循环来得到每一个按钮，赋值上全选按钮的勾取状态。

展示效果1：

有了全选按钮，实现其他按钮的勾取，我们也要实现，主动勾取完了所有按钮，全选按钮要自动勾取，反之没有勾取完，全选按钮不处于勾取状态 效果展示2：

二、实现效果

1.h5的布局

主要由复选框构造一个全选按钮，在使用ul设置其他的选择按钮 复选框：checkbox

css的布局 简单的删除li前面的默认样式。

我的爱好 
唱歌
打球
跳舞
跑步
画画

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

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

 for(let i=0;i

附：JavaScript实现全选、不选、反选功能完整实例

点击全选按钮，下面的列表项会被全部选择；

点击不选按钮，选项全部取消选择；

先在列表中选择几项，再点击反选按钮，之前被选择的会取消选择，之前没被选择的会变成选择状态。

下面是实现代码：

总结

到此这篇关于利用JavaScript实现简单全选和全不选的思路和方法的文章就介绍到这了,更多相关JS实现全选和全不选内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！