前端歌谣的刷题之路-第一百零二题-全选

最新推荐文章于 2024-09-28 19:02:04 发布

前端大歌谣

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量69

点赞数

分类专栏：前端牛客刷题记录文章标签：前端

本文链接：https://blog.csdn.net/geyaoisnice/article/details/125528606

版权

前端牛客刷题记录专栏收录该内容

171 篇文章 4 订阅

订阅专栏

前言

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

题目

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

核心代码

<!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>
  <!-- 请补全JavaScript代码，实现以下效果：
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>
    // 补全代码
    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>