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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
从vue源码看props的用法
Jan 09 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
Laravel 5框架学习之用户认证
2015/04/09 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
shiro授权的实现原理
2017/09/21 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
python实现多线程的两种方式
2016/05/22 Python
Python网络编程详解
2017/10/31 Python
名片管理系统python版
2018/01/11 Python
python实现kmp算法的实例代码
2019/04/03 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
打架检讨书100字
2014/01/19 职场文书
揭牌仪式主持词
2014/03/19 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python