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解决图片缩放及其优化的代码
May 23 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 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实现把数组按指定的个数分隔
2014/02/17 PHP
js获取页面传来参数的方法
2014/09/06 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python算法学习之计数排序实例
2013/12/18 Python
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python使用tornado实现登录和登出
2018/07/28 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python实现多层感知器
2019/01/18 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
python help函数实例用法
2020/12/06 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
教导处工作制度
2014/01/18 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
大雁塔导游词
2015/02/04 职场文书
期中考试后的感想
2015/08/07 职场文书
思想工作总结范文
2015/08/12 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python