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 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python pip 常用命令汇总
2020/10/19 Python
python打包生成so文件的实现
2020/10/30 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
Weblogic的布署方式
2013/08/23 面试题
市场部专员岗位职责
2013/11/30 职场文书
代理协议书
2014/04/22 职场文书
承诺书范文
2014/06/03 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
颐和园英文导游词
2015/01/30 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang
windows系统安装配置nginx环境
2022/06/28 Servers