备案控制台
开发者社区 开发与运维 文章 正文

原生js实现复选框选全部框与取消全选框

2023-07-22 39
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原生js实现复选框选全部框与取消全选框 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="" id="" class="check">全选/取消全选
        <br>
        <input type="checkbox" name="nan" id="" class="ball_checkbox">足球<br>
        <input type="checkbox" name="nan" id="" class="ball_checkbox">棒球<br>
        <input type="checkbox" name="nan" id="" class="ball_checkbox">篮球<br>
        <input type="checkbox" name="nan" id="" class="ball_checkbox">橄榄球<br>
        <script type="text/javascript">
            let delete_checkbox = document.getElementsByClassName('check')[0];
            let arr = true;
            delete_checkbox.addEventListener('click', function() {
                let nan = document.getElementsByName('nan');
                for (let i = 0; i < nan.length; i++) {
                    nan[i].checked = this.checked;
                }
            })
        </script>
    </body>
</html>
文章标签：
JavaScript
关键词：
JavaScript原生
JavaScript复选框
JavaScript选框
秋之合
目录
相关文章
Goodluck-dys
|
4天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
Goodluck-dys
9 0
风与烈酒
|
5天前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
风与烈酒
10 0
风与烈酒
|
5天前
|
JavaScript 安全 前端开发
原生JS实现一键复制，一键粘贴
原生JS实现一键复制，一键粘贴
风与烈酒
11 0
可乐鸡翅kele
|
15天前
|
前端开发 JavaScript 调度
原生JavaScript实现弹幕组件
原生JavaScript实现弹幕组件
可乐鸡翅kele
17 3
八百标兵奔北坡
|
17天前
|
JavaScript 前端开发
js原生自调用函数原理
JavaScript中的IIFE（Immediately Invoked Function Expression）是定义后立即执行的函数表达式。它有两种实现方式：匿名函数表达式 `(function() { /* 函数体 */ })()` 和命名函数声明 `(function myFunction() { /* 函数体 */ })()`。IIFE提供封闭作用域，防止变量冲突，常用于创建私有作用域、封装代码和避免变量提升问题。执行后，IIFE内部的变量和函数会被销毁，除非被特意暴露。
八百标兵奔北坡
11 2
八百标兵奔北坡
|
17天前
|
存储 JavaScript 前端开发
js原生方法，获取url上面所有参数，并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL，分割查询字符串，解码参数对，并存储在对象中。重复参数键会被存储为数组。
八百标兵奔北坡
23 2
yma16
|
18天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印（html绘制表格js加水印）
原生html—摆脱ps、excel 在线绘制财务表格加水印（html绘制表格js加水印）
yma16
20 1
开发工程师
|
设计模式 前端开发 JavaScript
100行代码让您学会JavaScript原生的Proxy设计模式
100行代码让您学会JavaScript原生的Proxy设计模式
开发工程师
113 0
100行代码让您学会JavaScript原生的Proxy设计模式
jerrywangsap
|
JavaScript 前端开发 Java
100行代码让您学会JavaScript原生的Proxy设计模式
jerrywangsap
3338 0
景天科技苑
|
14天前
|
存储 移动开发 JavaScript
学习javascript，前端知识精讲，助力你轻松掌握
学习javascript，前端知识精讲，助力你轻松掌握
景天科技苑
11 1