<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. SVN各种错误提示产生原因及处理方法大全

    SVN各种错误提示产生原因及处理方法大全 SVN各种错误提示产生原因及处理方法大全 1. svn: Server sent unexpected return value (500 Internal ...

  2. Eclipse中注释乱码解决办法

    问题描述:将别人的Java工程导入自己的工作空间之后,有时候会出现注释乱码问题. 这是由于IDE对汉字的编码方式不同造成的.比如,原来的开发人员使用的是UTF-8编码方式,而现在开发人员使用的IDE使 ...

  3. javascript中创建对象的方式及优缺点(二)

    一.工厂模式 流程: 定义一个函数,函数返回对象. 适用场景: 需要创建多个对象,都是Object类型. 优点:完成了返回一个对象的要求. 缺点: 对象没有一个具体的类型,无法通过constructo ...

  4. 51 Nod 1486 大大走格子

    1486 大大走格子  题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  关注 有一个h行w列的棋盘,里面有一些格子是不 ...

  5. python爬取智联招聘职位信息(多进程)

    测试了下,采用单进程爬取5000条数据大概需要22分钟,速度太慢了点.我们把脚本改进下,采用多进程. 首先获取所有要爬取的URL,在这里不建议使用集合,字典或列表的数据类型来保存这些URL,因为数据量 ...

  6. vue-cli的基础构造

    1,项目目录 2, bulid 下文件及目录 3,config下文件及目录 接下来说说vue-cli项目中页面相关的主要文件^o^ 首先是index.html: 说明:一般只定义一个空的根节点,在ma ...

  7. vue router 报错:NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}

    https://blog.csdn.net/weixin_43202608/article/details/98884620

  8. SSM三大框架整合配置详解

    首先,导入框架所需要的全部jar包(此处省略...........) 第一步:先从mybatis框架开始 我们只需要在mybatis的核心配置文件sqlConfigXml里写上这么一段话,代表的是给p ...

  9. 如何使用EF?

    方法1: 新建好项目之后 → 右击类库 → 新建项 → ADO.NET实体数据模型(在Visual C#项中) → 从数据库生成 → 选择你要映射的数据库的数据源(将 『是,在连接字符串中包含敏感数据 ...

  10. PDS常用快捷键

    绿色在Layout和Router中共用 1.PDS常用快捷键:2019-07-28 17:06:07 快捷键 说明 备注 shiftt + 左键双击 布线状态下,进行过孔放置   ctrl + 左键双 ...