#yyds干货盘点# 前端歌谣的刷题之路-第一百零一题-全选

简介: #yyds干货盘点# 前端歌谣的刷题之路-第一百零一题-全选

题目

请补全JavaScript代码,实现以下效果:

1. 选中"全选"框,以下所有选项全部勾选。

2. 把"全选"框从选中状态勾选成未选中状态,其他复选框全部取消选中效果。

3. 当其他复选框全部选中,"全选框"为选中状态。

4. 当其他复选框有一个未选中,"全选框"取消选中状态。

注意:

1. 必须使用DOM0级标准事件(onchange)

image.png

编辑

核心代码

<!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>

总结

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

相关文章
|
前端开发 API
歌谣学前端之react三个api之一续集
歌谣学前端之react三个api之一续集
59 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
119 0
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
111 0
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
111 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
67 0
|
19天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
19天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
33 0
|
19天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
19天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
19天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。