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 30 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
canvas实现贪食蛇的实践
Feb 15 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
php生成随机数的三种方法
2014/09/10 PHP
asp 的 分词实现代码
2007/05/24 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python中私有属性的定义方式
2020/03/05 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
2014大学生全国两会学习心得体会
2014/03/13 职场文书
2016公司年会主持词
2015/07/01 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技