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 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
jQuery选择器实例应用
Jan 05 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php function用法如何递归及return和echo区别
2014/03/07 PHP
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
python中pika模块问题的深入探究
2018/10/13 Python
python数值基础知识浅析
2019/11/19 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
python实现银行账户系统
2021/02/22 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
幼儿园教研活动总结
2014/04/30 职场文书
申论倡议书范文
2014/05/13 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python