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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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/07/17 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
List Installed Software Features
2007/06/11 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
javascript 精粹笔记
2010/05/09 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python对象的属性访问过程详解
2020/03/05 Python
领导党性分析材料
2014/02/15 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
家长给学校的建议书
2014/05/15 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
职务任命书范本
2014/06/05 职场文书
霸气队列口号
2014/06/18 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
个人向公司借款协议书
2014/10/09 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS