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.ui.progressbar 中文文档
Nov 26 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 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树的代码,可以嵌套任意层
2006/10/09 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
canvas的神奇用法
2017/02/03 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python 实现数组相减示例
2019/12/27 Python
Python如何对齐字符串
2020/07/30 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
Django中template for如何使用方法
2021/01/31 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
Skyscanner波兰:廉价航班
2017/11/07 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
优秀教师先进事迹
2014/01/22 职场文书
秘书英文求职信
2014/04/16 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android