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实现查找/添加/删除/指定元素的class
Apr 12 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
js实现查询商品案例
Jul 22 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中显示格式化的用户输入
2006/10/09 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
php常用的工具开发整理
2019/09/26 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
常用DOM整理
2015/06/16 Javascript
Javascript之String对象详解
2016/06/08 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
js实现限定范围拖拽的示例
2020/10/26 Javascript
python实现查询IP地址所在地
2015/03/29 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
python得到单词模式的示例
2018/10/15 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
幼师自荐信范文
2013/10/06 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
工作交流会欢迎词
2014/01/12 职场文书
售后客服工作职责
2014/06/16 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
初中班干部工作总结
2015/08/10 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL