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数组使用调用方法汇总
Dec 08 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python实现猜单词游戏
2020/05/22 Python
python打开文件的方式有哪些
2020/06/29 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
路政管理专业推荐信
2013/11/11 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP