<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. Apache工作流程

    一个经典的Apache处理php页面的流程 需要连接mysql数据库并处理的流程 网站是一系列网页的组合 从用户角度看就是访问诸如 hhtp://www.baidu.com -----url 这是互联 ...

  2. hiho #1308 : 搜索二·骑士问题

    #1308 : 搜索二·骑士问题 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi:小Ho你会下国际象棋么? 小Ho:应该算会吧,我知道每个棋子的移动方式,马走日象 ...

  3. Django框架简介(1)

    目录 手写web框架 基于wsgiref模块写web服务端框架 python三大主流框架 django框架介绍 注意事项 django下载方法 django项目及app的创建 命令行创建项目 pych ...

  4. (转)Android中图片占用内存计算

    在Android开发中,我现在发现很多人还不会对图片占用内存进行很好的计算.因此撰写该博文来做介绍,期望达到抛砖引玉的作用.   Android中一张图片(BitMap)占用的内存主要和以下几个因数有 ...

  5. Confluence 6 文件

    通过将你的文件上传到 Confluence 能够让你在一个统一的地方分享你项目小组的 PDF 文件,Office 文档,图片以及更多的内容. 自动版本,即时预览,权限控制和全文搜索意味着在网络驱动器上 ...

  6. 2018中国大学生程序设计竞赛 - 网络选拔赛 Find Integer

    Find Integer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tot ...

  7. 2002: [Hnoi2010]Bounce 弹飞绵羊(分块)

    2002: [Hnoi2010]Bounce 弹飞绵羊 时间限制: 10 Sec  内存限制: 259 MB 题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他 ...

  8. R_Studio(癌症)以等宽类别值、自定义类别值、等频类别值(分为5类)

    对“癌症.csv”中的肾细胞癌组织内微血管数进行连续属性的离散化处理 增加“微血管数分类1”属性,取值为等宽类别值(分为5类),增加“微血管数分类2”属性,取值为自定义类别值(0~40,41~60,6 ...

  9. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  10. Boost学习

    使用boost function使用类成员函数作为回调函数 #include <iostream> #include <boost/function.hpp> struct M ...