JavaScript如何实现“全选”和"全不选"功能？（代码示例）
码农天地 -
代码如下
<!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>效果
更多jQuery、Javascript特效，推荐访问：js特效大全！
以上就是JavaScript如何实现“全选”和"全不选"功能？（代码示例）的详细内容，更多请关注php中文网其它相关文章！
微信分享相关标签：JavaScript 全选 功能本文原创发布php中文网，转载请注明出处，感谢您的尊重！上一篇：JS实现好看的鼠标跟随彩色气泡效果（附代码）下一篇：JS如何实现盒子拖拽效果？（附代码）相关文章
相关视频
javascript中的split方法详解实例详解javascript中split字符串分割...荟萃JavaScript箭头函数语法小结详解JavaScript里的await/async...JavaScript 复杂判断的优雅写法JavaScript如何实现“全选”和"...JavaScript数据类型JavaScript赋值运算符JavaScript逻辑运算符JavaScript 函数定义网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论立即提交专题推荐独孤九贱-php全栈开发教程全栈 100W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
玉女心经-web前端开发教程入门 50W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
天龙八部-实战开发教程实战 80W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息青灯夜游
今天学习一小步，明天提升一大步
最近文章分享 10 个提高 JavaScript 技能的测验问答22215个你可能还不了解的 Git 命令985分享一些值得前端开发者收藏的 GitHub 库436发布技术文章最新文章热门排行JS 如何获取扫码枪输入数据一起看看JavaScript如何获取页面上被选中的文字现代JavaScript使用技巧之ES6中的简写语法用JavaScript获取伪元素(Pseudo-Element)属性的方法详解如何用JavaScript避免代码的重复执行如何用js统计字符串中每个字符出现的次数？JavaScript判断"字典"为空的方法8个问题测试你的JavaScript基础RN布局的实例详解jQ选择器汇总JS是什么意思json格式是什么？json格式文件怎么打开？vue.js中created方法的使用详解echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）js数组如何删除指定位置的元素？删除指定位置元素的2种方法怎样实现Vue项目中使用Vux推荐视频教程JavaScript入门基础视频教程JavaScript基础入门及设计模式视频教程JavaScript核心编程视频教程JavaScript OOP调试技巧视频教程视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 287557;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典php中文网：公益在线php培训，帮助PHP学习者快速成长！ 合肥彼岸互联信息技术有限公司
Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作
座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101
var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer(); 特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。
上一篇： CSS Modules 详解
下一篇： 分享几个实用的单行 JS 代码
Tags 标签
加个好友，技术交流
