【#|通过JavaScript 实现简单的全选、不全选的思想】目录
一、思路
我们要做到，选择了全选按钮，让下面的所有的按钮都要勾取。
实现的思路是，全选的按钮是否勾取，勾取后通过for循环来得到每一个按钮，赋值上全选按钮的勾取状态。
展示效果1：
有了全选按钮，实现其他按钮的勾取，我们也要实现，主动勾取完了所有按钮，全选按钮要自动勾取，反之没有勾取完，全选按钮不处于勾取状态
效果展示2：
二、实现效果
1.h5的布局
2.js代码
1.获取元素
2.获取全选，通过循环将选择按钮都赋上选择状态
3.设置，选择按钮全勾选后，全选按钮自动勾取，反之则取消勾取
一、思路
我们要做到，选择了全选按钮，让下面的所有的按钮都要勾取。
实现的思路是，全选的按钮是否勾取，勾取后通过for循环来得到每一个按钮，赋值上全选按钮的勾取状态。
展示效果1： 
文章图片
有了全选按钮，实现其他按钮的勾取，我们也要实现，主动勾取完了所有按钮，全选按钮要自动勾取，反之没有勾取完，全选按钮不处于勾取状态
效果展示2： 
文章图片
二、实现效果
1.h5的布局 主要由复选框构造一个全选按钮，在使用ul设置其他的选择按钮 复选框：checkbox
css的布局 简单的删除li前面的默认样式。
li{
list-style: none;
}
我的爱好
- 唱歌
- 打球
- 跳舞
- 跑步
- 画画
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;
i3.设置，选择按钮全勾选后，全选按钮自动勾取，反之则取消勾取
for(let i=0;
i推荐阅读
- #|【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别
- #|ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。（含例题）
- Vue基础知识|vue-router4之路由传参
- 人生苦短-我用Python|python爬取网页图片详解
- css相关|css实现元素水平垂直居中——6种方式
- vue|vuex4实现原理
- 测试|UI自动化
- webpack|Webpack(一）
- javascript|this相关问题