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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
Vue实现计算器计算效果
Aug 17 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 错误处理经验分享
2011/10/11 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
基于python中theano库的线性回归
2018/08/31 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
详解python tkinter模块安装过程
2020/01/06 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
深入了解python列表(LIST)
2020/06/08 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
公务员综合考察材料
2014/02/01 职场文书
质检部经理岗位职责
2014/02/19 职场文书
员工工作表现评语
2014/04/26 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
酒店节能减排方案
2014/05/26 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript