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导致网页中GIF动画停止的解决方法
Nov 02 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
详细分析Node.js 模块系统
Jun 28 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实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
Python requests获取网页常用方法解析
2020/02/20 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
年终考核实施方案
2014/05/26 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书