<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. 使用jmeter+ant+jenkins实现接口自动化测试

    摘自:https://blog.51cto.com/6183574/2318519 本次使用linux环境搭建自动化框架 一.配置ANT 首先下载Ant压缩包,下载地址:http://ant.apac ...

  2. 26. ClustrixDB 分布式架构/数据分片

    数据分片 介绍 共享磁盘vs.无共享 分布式数据库系统可分为两大类数据存储架构:(1)共享磁盘和(2)无共享. Shared Disk Architecture Shared Nothing Arch ...

  3. C++:关键字explicit的用法

    预测下面C++程序的输出: #include <iostream> using namespace std; class Complex { private: double real; d ...

  4. 【CF963C】Cutting Rectangle(数论,构造,map)

    题意: 思路:考虑构造最小的单位矩形然后平铺 单位矩形中每种矩形的数量可以根据比例算出来,为c[i]/d,其中d是所有c[i]的gcd,如果能构造成功答案即为d的因子个数 考虑如果要将两种矩形放在同一 ...

  5. 轮播图和xadmin后台管理

    一.数据库设计 轮播图 1.安装依赖 pip install Pillow 2.模型类:home/models.py class Banner(models.Model): ""& ...

  6. Ubuntu18.04安装rabbitvcs svn图形化客户端和简单实用

    1.1  自带source源里面查找rabbitvcs信息 sudo apt search rabbitvcs 1.2  安装rabbitvcs sudo apt install rabbitvcs- ...

  7. 缓存区溢出之slmail fuzzing

    这是我们的实验环境 kali 172.18.5.118smtp windows2003  172.18.5.117  pop3 110 smtp 25 本机 172.18.5.114 已经知道slma ...

  8. [CSP-S模拟测试]:分组配对(倍增+二分)

    题目传送门(内部题108) 输入格式 输入文件第一行为两个正整数$n,M$. 接下来两行,第一行为$n$个正整数$a_1\sim a_n$,其中$a_i$表示编号为$i$的男生的实力值:第二行为$n$ ...

  9. 关于MySQL 处理重复数据

    统计重复数据 以下我们将统计表中 first_name 和 last_name的重复记录数: mysql> SELECT COUNT(*) as repetitions, last_name, ...

  10. Struts初学

    自我概述 今天看了Struts,感觉这是个非常好用的东西!虽然它已经过时了,被springMVC取代了,但是仍然有了解的价值. 可是在学习过程中遇到了很多问题,比如其中一些原理很是抽象,有一些问题莫名 ...