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 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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 setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python中字符串的操作方法大全
2018/06/03 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
如何基于python实现归一化处理
2020/01/20 Python
Python守护进程实现过程详解
2020/02/10 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
python的pip有什么用
2020/06/17 Python
django rest framework 自定义返回方式
2020/07/12 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
Yahoo-PHP面试题3
2012/01/14 面试题
财务工作者先进事迹材料
2014/01/17 职场文书
个人承诺书格式
2014/06/03 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
名人传读书笔记
2015/06/26 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python