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操作ajax返回的json的注意问题!
Feb 23 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
javascript打印输出json实例
Nov 11 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue实现购物车功能
2017/04/27 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Python中 map()函数的用法详解
2018/07/10 Python
详解Python多线程下的list
2020/07/03 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
学校门卫工作职责
2013/12/07 职场文书
物流专业自荐信
2014/05/23 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
房屋产权证明书
2014/10/15 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
厉行节约工作总结
2015/08/12 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP