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居然支持中文(unicode)编程!
Apr 12 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
node.js如何操作MySQL数据库
Oct 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php命令行写shell实例详解
2018/07/19 PHP
破解Session cookie的方法
2006/07/28 Javascript
用 JSON 处理缓存
2007/04/27 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python 中 Meta Classes详解
2016/02/13 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
python raise的基本使用
2020/09/10 Python
python实现图片转字符画的完整代码
2021/02/21 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
编程输出如下图形
2013/11/24 面试题
高中体育教学反思
2014/01/29 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书