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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php常见的魔术方法详解
2014/12/25 PHP
PDO::getAttribute讲解
2019/01/28 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
three.js 入门案例详解
2018/01/23 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
对Python实现累加函数的方法详解
2019/01/23 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
民主评议党员自我评价材料
2014/09/18 职场文书
护理见习报告范文
2014/11/03 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书