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焦点图切换,上下翻转
May 12 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
php中JSON的使用方法
2015/04/30 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
JS实现多选框的操作
2020/06/24 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python 字符串定义
2009/09/25 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
运动会广播稿150字
2014/02/19 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
青年教师听课心得体会
2016/01/15 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL