jQuery实现复选框的全选和反选


Posted in Javascript onFebruary 02, 2017

话不多说,请看代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form>
 <label for="apple">苹果</label>
 <input type="checkbox" name="apple">
 <label for="banana">香蕉</label>
 <input type="checkbox" name="banana">
 <label for="orange">橘子</label>
 <input type="checkbox" name="orange">
 <input type="button" value="全选" onclick="allPick()">
 <input type="button" value="全不选" onclick="unAllPick()">
 <input type="button" value="反转" onclick="inverserPick()">
 </form>
 <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script>
 // 全选
 function allPick() {
  $("[type=checkbox]:checkbox").each(function () {
  this.checked = true;
  })
 }
 // 全不选
 function unAllPick() {
  $("[type=checkbox]:checkbox").each(function () {
  this.checked = false;
  })
 }
 // 反转
 function inverserPick() {
  $("[type=checkbox]:checkbox").each(function () {
  this.checked = !this.checked;
  })
 }
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
koa源码中promise的解读
Nov 13 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
详解TypeScript的基础类型
Feb 18 Javascript
jQuery制作图片旋转效果
Feb 02 #Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 #Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 #Javascript
javascript实现简易计算器
Feb 01 #Javascript
javascript实现右下角广告框效果
Feb 01 #Javascript
基于javascript实现最简单选项卡切换
Feb 01 #Javascript
快速实现jQuery多级菜单效果
Feb 01 #Javascript
You might like
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP单例模式详细介绍
2015/07/01 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python骚操作之动态定义函数
2019/03/26 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python3实现定时任务的四种方式
2019/06/03 Python
如何编写python的daemon程序
2021/01/07 Python
python 模块导入问题汇总
2021/02/01 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
大学毕业寄语大全
2014/04/10 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
终止合同协议书
2014/04/17 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
python opencv通过4坐标剪裁图片
2021/06/05 Python
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫