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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 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获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
限制复选框的最大可选数
2006/07/01 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Python中的并发编程实例
2014/07/07 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
django允许外部访问的实例讲解
2018/05/14 Python
详解Python 函数如何重载?
2019/04/23 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
详解Python高阶函数
2020/08/15 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
企业安全生产月活动总结
2014/07/05 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
班级管理经验交流材料
2015/11/02 职场文书