<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. linux7buffer和cache

    现象:作为hdfs集群的主节点,越来越卡 排查:CPU,mem CPU正常,检查内存情况,发现如下 如上截图:发现程序可用内存为91G,但是部分swap分区被占用.于是引出如下思考,free -h这条 ...

  2. conda退出base 环境

    安装conda后取消命令行前出现的base,取消每次启动自动激活conda的基础环境   方法一: 每次在命令行通过conda deactivate退出base环境回到系统自动的环境 方法二 1,通过 ...

  3. [转] SSH两种登录方式(公私钥)解析

    转自:https://www.cnblogs.com/hukey/p/6248468.html SSH登录方式主要分为两种: 1. 用户名密码验证方式 说明: (1) 当客户端发起ssh请求,服务器会 ...

  4. List集合的方法总结

    1. 添加方法 boolean add(E e): 向集合的末尾添加指定的元素 boolean addAll(Collection<? extends E> c): 向集合的末尾添加一个指 ...

  5. Java类路径的问题

    下面是eclipse中的文件组织形式. 下面是硬盘中文件的组织形式: src:中就是自己编写的没有编译的代码. target中是编译的Java中的class文件和一些不用编译的文件.这样也就明白了为什 ...

  6. JDK_API剖析之java.io包

    Java的核心库java.io提供了全面的IO接口.包括:文件读写.标准设备输出等.Java中IO是以流为基础进行输入输出的,所有数据被串行化写入输出流,或者从输入流读入. 一.接口 1.Closea ...

  7. Python3 获取一大段文本之间两个关键字之间的内容

    用re或者string.find.以下是re代码 123456789101112131415import re#文本所在TXT文件file = '123.txt' #关键字1,2(修改引号间的内容)w ...

  8. python学习之路(16)

    Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的时,filter()把传入的函数依次作用于每个元素,然后根据返回值是 ...

  9. spring boot V部落 V人事项目

    公司倒闭 1 年多了,而我在公司倒闭时候做的开源项目,最近却上了 GitHub Trending,看着这个数据,真是不胜唏嘘. 缘起 2017 年 11 月份的时候,松哥所在的公司因为经营不善要关门了 ...

  10. Java密码处理