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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
JavaScript中的其他对象
Jan 16 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
Javascript实现计算个人所得税
May 10 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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&amp;&amp;mysql)三
2006/10/09 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
js正确获取元素样式详解
2009/08/07 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python扩展内置类型详解
2018/03/26 Python
python判断设备是否联网的方法
2018/06/29 Python
Python 字符串换行的多种方式
2018/09/06 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
详解python配置虚拟环境
2019/04/08 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python实现大文件分割与合并
2019/07/22 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
学习党课思想汇报
2013/12/29 职场文书
安全生产活动月方案
2014/03/09 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python