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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
js实现随机点名器精简版
Jun 29 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
如何用JS实现简单的数据监听
May 06 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
php4的session功能评述(二)
2006/10/09 PHP
php header示例代码(推荐)
2010/09/08 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python多线程扫描端口示例
2014/01/16 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
如何在django中添加日志功能
2020/02/06 Python
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
甘南现象心得体会
2014/09/11 职场文书
驳回起诉裁定书
2015/05/19 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android