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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
jquery实现倒计时功能
Dec 28 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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二维数组按某个键值排序的实例讲解
2019/02/15 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Hadoop中的Python框架的使用指南
2015/04/22 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python初学者常见错误详解
2019/07/02 Python
django实现日志按日期分割
2020/05/21 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
医学生个人求职信范文
2014/02/07 职场文书
捐助倡议书范文
2014/04/15 职场文书
导游词300字
2015/02/13 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript