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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
js 编写规范
Mar 03 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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通过header实现文本文件下载的代码
2010/08/08 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
好的自荐信的要求
2013/10/30 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
体育课外活动总结
2014/07/08 职场文书
重阳节活动主持词
2015/07/04 职场文书
毕业欢送会致辞
2015/07/29 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python