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 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
php文件包含的几种方式总结
2019/09/19 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
Python中条件判断语句的简单使用方法
2015/08/21 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
django2.0扩展用户字段示例
2019/02/13 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
高级Java程序员面试题
2016/06/23 面试题
留学推荐信怎么写
2014/01/25 职场文书
军训个人总结
2015/03/03 职场文书
求职自我评价怎么写
2015/03/09 职场文书
辞职离别感言
2015/08/04 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android