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代码
Mar 10 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
Javascript的比较汇总
Jul 25 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
vue实现简单的登录弹出框
Oct 26 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php学习 函数 课件
2008/06/15 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
软件测试英文面试题
2012/10/14 面试题
机电系毕业生求职信
2014/07/11 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python