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 相关文章推荐
js 输出内容到新窗口具体实现代码
May 31 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
JsRender实用入门教程
Oct 31 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
JavaScript实现图片放大预览效果
Nov 02 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打开远程文件的方法和风险及解决方法
2013/11/12 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
javascript制作2048游戏
2015/03/30 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python os用法总结
2018/06/08 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Pygame框架实现飞机大战
2020/08/07 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
触摸春天教学反思
2014/02/03 职场文书
学校万圣节活动方案
2014/02/13 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
活动总结新闻稿
2014/08/30 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
2015年材料员工作总结
2015/04/30 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书