JS之全选按钮的实现

需要实现的简单功能

功能1 点击全选按钮的时候, 让选项1~4这几个按钮选中

1. 点击全选按钮
2. 判断当前全选按钮的选中状态
3. 根据全选按钮的选中状态, 决定是否让 1~4这几个按钮被选中

功能2 选项1~4全被选中的时候, 让全选按钮被选中

1. 点击选项1~4其中一个按钮
2. 判断当前选中1~4的选中状态是否都为选中
3. 如果都是选中的, 将全选按钮选中

1.html部分的代码

 <input type="checkbox" class="allBtn"> 全选
    <hr>
 <input type="checkbox" class="item"> 选项1 <br>
 <input type="checkbox" class="item"> 选项2 <br>
 <input type="checkbox" class="item"> 选项3 <br>
 <input type="checkbox" class="item"> 选项4 <br>

2.JavaScript部分的代码

功能一

基础版

<script>
//第一步:获取元素:
var allBtn = document.querySelector('.allBtn')
// 获取class为allBtn的元素

var items = [...document.querySelectorAll('.item')]
//获取所有class为item的元素,并且输出为真数组

allBtn.onclick = function(){
       if(allBtn.checked === true){
       //选中1~4选项
          items.forEach(function(item){
             item.checked === true
         })
      } else{
      //取消选中1~4选项
        item.forEach(function(item){
        item.checked === flase
        })
}
</script>

优化版

<script>
//第一步:获取元素:
var allBtn = document.querySelector('.allBtn')
// 获取class为allBtn的元素

var items = [...document.querySelectorAll('.item')]
//获取所有class为item的元素,并且输出为真数组

allBtn.onclick = function(){
       if(allBtn.checked === true){
       //选中1~4选项
          items.forEach(function(item){
             item.checked === allBtn.checked
         })
      } else{
      //取消选中1~4选项
        item.forEach(function(item){
        item.checked === allBtn.checked
        })
}
</script>

最终版

<script>
//第一步:获取元素:
var allBtn = document.querySelector('.allBtn')
// 获取class为allBtn的元素

var items = [...document.querySelectorAll('.item')]
//获取所有class为item的元素,并且输出为真数组

 allBtn.onclick = function () {
            items.forEach(function (item) {
                item.checked = allBtn.checked
            })
</script>

功能二

<script>
items.forEach(function (item) {
            item.onclick = function () {
                // 点击其中一个按钮的时候, 判断其他几个 的选中状态是否为 true; 如果都是true 那么选中全选; 否则不选中全选
                allBtn.checked = items.every(function (item) {
                    return item.checked
                })
            }
        })
</script>