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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
js中split和replace的用法实例
Feb 28 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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获得数组交集与差集的方法
2015/06/10 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
js实现下一页页码效果
2017/03/07 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Python是编译运行的验证方法
2015/01/30 Python
详解Python当中的字符串和编码
2015/04/25 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python后端接收前端回传的文件方法
2019/01/02 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
公司部门司机岗位职责
2014/01/03 职场文书
公司晚会主持词
2014/03/22 职场文书
教师新年寄语
2014/04/03 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
Python开发五子棋小游戏
2022/05/02 Python