jQuery Checkbox 全选 反选的简单实例


Posted in Javascript onNovember 29, 2016

1.全选、反选

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script src="http://xiazai.3water.com/201611/yuanma/jquery(3water.com).rar"></script>
 <script type="text/javascript">
  $(function () {
   $("#selall").on("click", function () { $("#plalst :checkbox").prop("checked", true); });
   $("#selnone").on("click", function () { $("#plalst :checkbox").prop("checked", false); });
   $("#resver").on("click", function () { $("#plalst :checkbox").prop("checked", function (i, val) { return !val; }); });
   $("#chkAll").on("click", function () { $("#plalst :checkbox").prop("checked", $("#chkAll").prop("checked")) });

  });
 </script>
</head>
<body>
 <div id="plalst">
  <input type="checkbox" />一队
  <input type="checkbox" />二队
  <input type="checkbox" />三队
  <input type="checkbox" />四队
  <input type="checkbox" />五队
  <input type="checkbox" />六队
 </div>
 <br /><br /><br />
 <input type="button" id="selall" value="全选" />
 <input type="button" id="selnone" value="全不选" />
 <input type="button" id="resver" value="反选" />
 <input type="checkbox" id="chkAll" /><label for="chkAll" >选择</label>
</body>
</html>

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 #Javascript
js拖拽功能实现代码解析
Nov 28 #Javascript
百度搜索框智能提示案例jsonp
Nov 28 #Javascript
JS函数多个参数默认值指定方法分析
Nov 28 #Javascript
ajax级联菜单实现方法实例分析
Nov 28 #Javascript
jQuery select自动选中功能实现方法分析
Nov 28 #Javascript
JS两种类型的表单提交方法实例分析
Nov 28 #Javascript
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP 引用是个坏习惯
2010/03/12 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
详解js闭包
2014/09/02 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
DOM事件探秘篇
2017/02/15 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python实现简单的文字识别
2018/11/27 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
Django中的session用法详解
2020/03/09 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
运动会跳远广播稿
2014/02/04 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
大学班长竞选稿
2015/11/20 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python