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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
Web应用开发TypeScript使用详解
May 25 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
js有序数组的连接问题
2013/10/01 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python使用udp实现聊天器功能
2018/12/10 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
租车协议书
2015/01/27 职场文书
离婚案件原告代理词
2015/05/23 职场文书
致运动员赞词
2015/07/22 职场文书