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系列(6) 强大的原型和原型链
Jan 15 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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
用ODBC的分页显示
2006/10/09 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
python读取Android permission文件
2013/11/01 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Python Merge函数原理及用法解析
2020/09/16 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
关于学习的演讲稿
2014/05/10 职场文书
求职信名称怎么写
2014/05/26 职场文书
安全教育的主题班会
2015/08/13 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
Apache POI的基本使用详解
2021/11/07 Servers