不多说看例子:

右上侧全选,然后每个栏又有一个栏目全选。

反选解决办法:

  1. function selectSubscibe(_class) {
  2. $("." + _class + " input[type='checkbox']").each(function() {
  3. this.checked = !this.checked;
  4. })
  5. }

onclick="selectSubscibe('zhuanxiang')"函数内传入子类的class即可完成反选功能!

全选功能:

  1. function selectSubscibe(_this,_class) {
  2. if(_this.checked){
  3. $("." + _class + " input[type='checkbox']").each(function() {
  4. this.checked = true;
  5. })
  6. }else{
  7. $("." + _class + " input[type='checkbox']").each(function() {
  8. this.checked = false;
  9. })
  10. }
  11.  
  12. }

把当前对象传进来,接下来的都能看懂。

JSP部分源码:

  1. <div class="col-md-9 pd-lt-clear bd-lt">
  2. <div class="center-cont">
  3. <fieldset>
  4. <legend>我的订阅</legend>
  5. <div class="cont-opt">
  6. <label>
  7. <input type="checkbox" onclick="selectSubscibe(this,'quanxuan')" value="" name="">
  8. 全选所有信息栏目
  9. </label>
  10. </div>
  11. <table class="table table-bordered table-hover table-sm quanxuan">
  12. <thead>
  13. <tr>
  14. <th>
  15. <label>
  16. <input type="checkbox" onclick="selectSubscibe(this,'yanjiu')" class="yanjiudongtai" value="" name="">
  17. 研究动态
  18. </label>
  19. </th>
  20. <th>
  21. <label>
  22. <input type="checkbox" onclick="selectSubscibe(this,'redian')" value="" name="">
  23. 热点追踪
  24. </label>
  25. </th>
  26. <th>
  27. <label>
  28. <input type="checkbox" onclick="selectSubscibe(this,'qingbao')" value="" name="">
  29. 情报发现
  30. </label>
  31. </th>
  32. <th>
  33. <label>
  34. <input type="checkbox" class="one" onclick="selectSubscibe(this,'zhuanxiang')" value="" name="">
  35. 专项进展
  36. </label>
  37. </th>
  38. </tr>
  39. </thead>
  40. <tbody>
  41. <form action="${path }/accountSubscibe" method="post" id="form1">
  42. <tr>
  43. <td class="yanjiu">
  44. <p>
  45. <label>
  46. <input type="checkbox" value="lunwen" name="subscibes">
  47. 论文
  48. </label>
  49. </p>
  50. <p>
  51. <label>
  52. <input type="checkbox" value="zhuanli" name="subscibes">
  53. 专利
  54. </label>
  55. </p>
  56. <p>
  57. <label>
  58. <input type="checkbox" value="xinyao" name="subscibes">
  59. 新药
  60. </label>
  61. </p>
  62. <p>
  63. <label>
  64. <input type="checkbox" value="jiangxiang" name="subscibes">
  65. 奖项
  66. </label>
  67. </p>
  68. </td>
  69. <td class="redian">
  70. <p>
  71. <label>
  72. <input type="checkbox" value="zhengce" name="subscibes">
  73. 政策
  74. </label>
  75. </p>
  76. <p>
  77. <label>
  78. <input type="checkbox" value="yanfa" name="subscibes">
  79. 研发
  80. </label>
  81. </p>
  82. <p>
  83. <label>
  84. <input type="checkbox" value="shichang" name="subscibes">
  85. 市场
  86. </label>
  87. </p>
  88. </td>
  89. <td class="qingbao">
  90. <p>
  91. <label>
  92. <input type="checkbox" value="jianbao" name="subscibes">
  93. 简报
  94. </label>
  95. </p>
  96. <p>
  97. <label>
  98. <input type="checkbox" value="zhuanliditu" name="subscibes">
  99. 专利地图
  100. </label>
  101. </p>
  102. <p>
  103. <label>
  104. <input type="checkbox" value="taishibaogao" name="subscibes">
  105. 态势报告
  106. </label>
  107. </p>
  108. <p>
  109. <label>
  110. <input type="checkbox" value="wenxianqingbaofuwu" name="subscibes">
  111. 文献情报服务
  112. </label>
  113. </p>
  114. </td>
  115. <td class="zhuanxiang">
  116. <p>
  117. <label>
  118. <input type="checkbox" class="DaysNew" value="xinwen" name="subscibes">
  119. 新闻
  120. </label>
  121. </p>
  122. <p>
  123. <label>
  124. <input type="checkbox" class="DaysNew" value="tongzhitonggao" name="subscibes">
  125. 通知通告
  126. </label>
  127. </p>
  128. <p>
  129. <label>
  130. <input type="checkbox" class="DaysNew" value="zhuanxiangguanli" name="subscibes">
  131. 专项管理
  132. </label>
  133. </p>
  134. </td>
  135. </tr>
  136. </form>
  137. </tbody>
  138. </table>
  139. <div class="opt text-center">
  140. <button type="submit" class="btn btn-accept">订阅</button>
  141. <button type="reset" class="btn btn-default">全部退订</button>
  142. </div>
  143. </fieldset>
  144. </div>
  145. </div>

checked 全选 反选 示例的更多相关文章

  1. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  3. 关于input全选反选恶心的异常情况

    上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...

  4. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  5. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  7. BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  8. 用javascript实现全选/反选组件

    以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...

  9. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

随机推荐

  1. python基础补漏-03-函数

    函数:一般来说就是 以功能划分的代码模块 [1] 内置函数 一般我们使用的模块 ---可以大概有个了解 大多数的用法都很简单 2 [函数返回值] 我们应该控制函数的每条分支. 也就是说 我们得到的函数 ...

  2. CSS Hack

    CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...

  3. iOS 组件化漫谈

    1.准备工作 由于工程越来越大,里面的文件也越来越多.很多时候merge代码的时候工程文件起了冲突之后,若 .xcodeproj文件冲突 打开之后很难以修改. 架构其实相对开发来说还是比较难于下手的东 ...

  4. Python 静态方法、类方法

    今天我们来讨论一下Python类中所存在的特殊方法--静态方法.类方法. 一.定义 静态方法: 一种简单函数,符合以下要求: 1.嵌套在类中. 2.没有self参数. 特点: 1.类调用.实例调用,静 ...

  5. c# .net获取随机字符串!

    public string getStr(bool b,int n)//b:是否有复杂字符,n:生成的字符串长度 { string str = "0123456789abcdefghijkl ...

  6. php实现返回上一页的功能

    php实现返回上一页的功能的3种有效方法 header(location:你的上一页的路径);   //   注意这个函数前不能有输出      header(location:.getenv(&qu ...

  7. 基于fastweixin的微信开发环境搭建(一)

    由于公司业务需要,开发微信版本,才开始接触微信公众平台.在github折腾了几天,试过好几个微信sdk,最终选择fastweixin.个人觉得这个框架还是值得使用的,使用也简单.那么问题来了,很多人想 ...

  8. deiban8 sourcelist

    deb http://ftp2.cn.debian.org/debian/ jessie main non-free contribdeb http://ftp2.cn.debian.org/debi ...

  9. 2MyBatis入门--深入浅出MyBatis技术原理与实践(笔记)

    什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis ...

  10. ActiveMQ中的Destination高级特性(一)

    ---------------------------------------------------------------------------------------- Destination ...