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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
js微信分享实现代码
Oct 11 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 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
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
Vue响应式原理详解
2017/04/18 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Python匿名函数及应用示例
2019/04/09 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
与UNIX有关的几个名词
2015/09/17 面试题
怎样写留学自荐信
2013/11/11 职场文书
中学教师请假制度
2014/02/03 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js