<div class="con">
<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('cc');"> 全选
<input name='cc' type='checkbox' value='' > A
<input name='cc' type='checkbox' value='' > B
<input name='cc' type='checkbox' value='' > C
<input name='cc' type='checkbox' value='' > D
<input name='cc' type='checkbox' value='' > E
<input name='cc' type='checkbox' value='' > F
</div> <script type="text/javascript">
function cli (obj) {
let chill = document.getElementById('all')
let chilles = document.getElementsByName(obj)
if (chill.checked) {
for (let i = 0; i < chilles.length; i++) {
chilles[i].checked = true
}
} else {
for (let i = 0; i < chilles.length; i++) {
chilles[i].checked = false
}
}
}

原生js实现选中所有的checkbox。需要给所有的input标签写上专属的name。getElementsByName() 方法可返回带有指定名称的对象的集合。查询元素的 name 属性。

原生js实现选中所有的checkbox的更多相关文章

  1. 原生JS实现选中的radio变为未选中

    需求如下,radio已经选中,再点击,取消选中状态. 效果如链接:演示地址 直接上代码: <!DOCTYPE html> <html> <head> <met ...

  2. 原生js获取页面中所有checkbox

    var inputs = document.getElementsByTagName("input");//获取所有的input标签对象 var checkboxArray = [ ...

  3. 原生js获取页面所有的checkbox

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

    折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

  5. JS 如何获取radio或者checkbox选中后的值

    废话不多说,直接上代码: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. 原生html、js手写 radio与checkbox 美化

    原生html.js手写 radio与checkbox   美化 html <!DOCTYPE html> <html> <head> <meta charse ...

  7. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. jquery选中radio或checkbox的正确姿势

    jquery选中radio或checkbox的正确姿势 Intro 前几天突然遇到一个问题,没有任何征兆的..,jquery 选中radio button单选框时,一直没有办法选中,后来查了许多资料, ...

  9. 利用原生js制做数据管理平台,适合初学者学习

    摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...

随机推荐

  1. 处理并解决mysql8.0 caching-sha2-password问题,开启远程访问

    原文:https://blog.csdn.net/u010026255/article/details/80062153 启动mysql服务:service mysqld start ALTER US ...

  2. 走进Github的世界

    1.官网注册账号 2.官网向导: https://guides.github.com/activities/hello-world/ 值得推荐: Git手册: https://git-scm.com/ ...

  3. k8s命令自动补全

    Linux yum install -y bash-completion source /usr/share/bash-completion/bash_completion source <(k ...

  4. JAVA 获取类名,函数名

    获取以下获取方法所在函数的相关信息 1.获取当前函数名:Thread.currentThread().getStackTrace()[1].getMethodName(); 2.获取当前类名:Thre ...

  5. 静态库lib、动态库dll基础

    首先从hello world!开始 //main.cpp文件 void cpu(); int main() { put(); ; } 在main.cpp中定义了一个cpu():函数,但没有实现其功能, ...

  6. 如何开始使用 Akka

    如果你是第一次开始使用 Akka,我们推荐你先运行简单的 Hello World 项目.情况参考  Quickstart Guide 页面中的内容来下载和运行 Hello World 示例程序.上面链 ...

  7. [CSP-S模拟测试]:打表(猜测题意+结论)

    题目传送门(内部题139) 输入格式 第一行两个整数$k,ans$,表示内存地址$A$的位数,以及答案所在的内存地址. 接下来一行$2^k$个整数,分别表示内存地址$0...2^k-1$上的值. 输出 ...

  8. Java常考面试题整理(五)

    81.RMI中的远程接口(Remote Interface)扮演了什么样的角色? 参考答案: 远程接口用来标识哪些方法是可以被非本地虚拟机调用的接口.远程对象必须要直接或者是间接实现远程接口.实现了远 ...

  9. 【转】Diamond -- 分布式配置中心

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  10. nodejs 配置服务器

    node 是 js 的运行的后台环境,他自身集成了很多模块,集成的模块直接 require 就行了: npm 第三方平台,他也是为 node 服务的,对于 npm 中的模块,先 npm install ...