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 相关文章推荐
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
使用Vue自定义指令实现Select组件
May 24 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python计算方程式根的方法
2015/05/07 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python 使用get_argument获取url query参数
2017/04/28 Python
python交易记录链的实现过程详解
2019/07/03 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
scrapy-splash简单使用详解
2021/02/21 Python
保安拾金不昧表扬信
2014/01/15 职场文书
讲党性心得体会
2014/09/03 职场文书
送达通知书
2015/04/25 职场文书
二审代理词范文
2015/05/25 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang