JS实现“全选”和"全不选"功能代码实例


Posted in Javascript onFebruary 06, 2020

这篇文章主要介绍了JS实现“全选”和"全不选"功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>

  function clickon() {
    // 获取到body中所有checkbox
    var checkbox = document.querySelectorAll("input[type='checkbox']");

    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = true;
    }
  }

  function unclick() {
    var checkbox = document.querySelectorAll("input[type='checkbox']");

    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = false;
    }
  }

</script>
<body>

<form>
  <input type="checkbox">吃
  <input type="checkbox">喝
  <input type="checkbox">拉
  <input type="checkbox">撒
  <input type="button" value="全选" onclick="clickon()">
  <input type="button" value="全不选" onclick="unclick()">
</form>

</body>
</html>

效果

JS实现“全选”和&quot;全不选&quot;功能代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
Express.JS使用详解
Jul 17 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 #Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 #Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 #Javascript
js get和post请求实现代码解析
Feb 06 #Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 #Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 #Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 #Javascript
You might like
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
smarty自定义函数用法示例
2016/05/20 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
社区国庆节活动方案
2014/02/05 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
结婚保证书
2015/01/16 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书