<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. 深浅拷贝(copy)

    目录 copy 模块 1.拷贝(赋值) 1). x为不可变数据类型 2). x为可变数据类型 3). 可变数据类型(比如列表)内,既有不可变元素,又有容器类型可变元素(比如列表) 2.浅拷贝 3.深拷 ...

  2. qt5--树形控件QTreeWidget

    需要       #include <QTreeWidget>               #include <QTreeWidgetItem> #include " ...

  3. 【leetcode】1247. Minimum Swaps to Make Strings Equal

    题目如下: You are given two strings s1 and s2 of equal length consisting of letters "x" and &q ...

  4. prometheus 标签修改promSQL

    relabel_configs 根据prometheus 监控k8s配置文件中学习 未修改前默认配置文件: 网页显示: 修改配置文件后: 网页显示: 服务发现网页: 总结: 在数据采集之前对任何目标的 ...

  5. Linux 开启相关端口及查看已开启端口

    防火墙层面:   /sbin/iptables -I INPUT -p tcp --dport 8011 -j ACCEPT #开启8011端口  /etc/rc.d/init.d/iptables ...

  6. jquery disabled选择器 语法

    jquery disabled选择器 语法 作用:disabled 选择器选取所有禁用的表单元素.大理石平台价格表 语法:$(":disabled") jquery disable ...

  7. 第一次的迷宫为队列版,这个为搜索版x(自己写的嘿嘿)

    错误原因:第一次提交的时候把Yes跟No输错了都输为大写:…… 代码来啦! #include<cstdio> #include<iostream> using namespac ...

  8. Makefile文件试错

    1成功: src = $(wildcard ./*cpp) obj = $(patsubst %.cpp,%.o ,$(src)) target = test $(target) : $(obj) g ...

  9. HTML5 localStorage setItem getItem removeItem

    HTML5 WEB存储中提供了两种客户端的数据存储方法:localStorage 还有sessionStorage localStorage: localStorage 方法存储的数据没有时间限制.第 ...

  10. python开发环境的搭建,以及pycharm的安装

    先到python 官网下载python. 下载好了之后,直接运行exe文件,进行安装(在安装程序运行后的第一个form上,点击next的时候,在next的左侧有一排文字和一个复选框,那个是添加环境变量 ...