前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

请补全JavaScriptm88官方，实现以下效果：
1. 选中"全选"框，以下所有选项全部勾选。
2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
3. 当其他复选框全部选中，"全选框"为选中状态。
4. 当其他复选框有一个未选中，"全选框"取消选中状态。
注意：
1. 必须使用DOM0级标准事件（onchange）

编辑

 核心m88官方

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全选</title>
</head>
<style>
  ul {
    list-style: none;
  }
</style>

<body>
  <!-- 请补全JavaScriptm88官方，实现以下效果：
1. 选中"全选"框，以下所有选项全部勾选。
2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
3. 当其他复选框全部选中，"全选框"为选中状态。
4. 当其他复选框有一个未选中，"全选框"取消选中状态。
注意：
1. 必须使用DOM0级标准事件（onchange） -->
  <ul>
    <li>全选<input type='checkbox' id='all'></li>
    <li>Java<input type='checkbox' class='item'></li>
    <li>javaScript<input type='checkbox' class='item'></li>
    <li>C++<input type='checkbox' class='item'></li>
    <li>python<input type='checkbox' class='item'></li>
    <li>.net<input type='checkbox' class='item'></li>
  </ul>

  <script>
    // 补全m88官方
    var all = document.querySelector('#all')
    var options = Array.from(document.querySelectorAll('.item'))
    all.onchange = () => {
      options.forEach(x => x.checked = all.checked)
    }
    options.forEach((item) => {
      item.onchange = function () {
        if (!this.checked) {
          all.checked = false
        } else {
          if (options.every(x => x.checked)) {
            all.checked = true
          } else {
            all.checked = false
          }
        }
      }
    })
  </script>
</body>

</html>

总结

将类数组使用from转化为真正的数组才能使用every