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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 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 Document 代码注释规范
2009/04/13 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
村委会换届选举方案
2014/05/03 职场文书
英文推荐信格式范文
2014/05/09 职场文书
二审答辩状格式
2015/05/22 职场文书
医院见习总结
2015/06/24 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书