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 Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
vue中引入第三方字体文件的方法示例
Dec 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
使用无限生命期Session的方法
2006/10/09 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
JS的千分位算法实现思路
2013/07/31 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
JS实现滑动插件
2020/01/15 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python游戏开发的五个案例分享
2020/03/09 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python 爬虫请求模块requests详解
2020/12/04 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
打造高效课堂实施方案
2014/03/22 职场文书
大学生个人求职信例文
2014/07/07 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
干部个人考察材料
2014/12/24 职场文书
教师教育心得体会
2016/01/19 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Python anaconda安装库命令详解
2021/10/16 Python
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL