不多说看例子:

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

反选解决办法:

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

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

全选功能:

function selectSubscibe(_this,_class) {
if(_this.checked){
$("." + _class + " input[type='checkbox']").each(function() {
this.checked = true;
})
}else{
$("." + _class + " input[type='checkbox']").each(function() {
this.checked = false;
})
} }

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

JSP部分源码:

    <div class="col-md-9 pd-lt-clear bd-lt">
<div class="center-cont">
<fieldset>
<legend>我的订阅</legend>
<div class="cont-opt">
<label>
<input type="checkbox" onclick="selectSubscibe(this,'quanxuan')" value="" name="">
全选所有信息栏目
</label>
</div>
<table class="table table-bordered table-hover table-sm quanxuan">
<thead>
<tr>
<th>
<label>
<input type="checkbox" onclick="selectSubscibe(this,'yanjiu')" class="yanjiudongtai" value="" name="">
研究动态
</label>
</th>
<th>
<label>
<input type="checkbox" onclick="selectSubscibe(this,'redian')" value="" name="">
热点追踪
</label>
</th>
<th>
<label>
<input type="checkbox" onclick="selectSubscibe(this,'qingbao')" value="" name="">
情报发现
</label>
</th>
<th>
<label>
<input type="checkbox" class="one" onclick="selectSubscibe(this,'zhuanxiang')" value="" name="">
专项进展
</label>
</th>
</tr>
</thead>
<tbody>
<form action="${path }/accountSubscibe" method="post" id="form1">
<tr>
<td class="yanjiu">
<p>
<label>
<input type="checkbox" value="lunwen" name="subscibes">
论文
</label>
</p>
<p>
<label>
<input type="checkbox" value="zhuanli" name="subscibes">
专利
</label>
</p>
<p>
<label>
<input type="checkbox" value="xinyao" name="subscibes">
新药
</label>
</p>
<p>
<label>
<input type="checkbox" value="jiangxiang" name="subscibes">
奖项
</label>
</p>
</td>
<td class="redian">
<p>
<label>
<input type="checkbox" value="zhengce" name="subscibes">
政策
</label>
</p>
<p>
<label>
<input type="checkbox" value="yanfa" name="subscibes">
研发
</label>
</p>
<p>
<label>
<input type="checkbox" value="shichang" name="subscibes">
市场
</label>
</p>
</td>
<td class="qingbao">
<p>
<label>
<input type="checkbox" value="jianbao" name="subscibes">
简报
</label>
</p>
<p>
<label>
<input type="checkbox" value="zhuanliditu" name="subscibes">
专利地图
</label>
</p>
<p>
<label>
<input type="checkbox" value="taishibaogao" name="subscibes">
态势报告
</label>
</p>
<p>
<label>
<input type="checkbox" value="wenxianqingbaofuwu" name="subscibes">
文献情报服务
</label>
</p>
</td>
<td class="zhuanxiang">
<p>
<label>
<input type="checkbox" class="DaysNew" value="xinwen" name="subscibes">
新闻
</label>
</p>
<p>
<label>
<input type="checkbox" class="DaysNew" value="tongzhitonggao" name="subscibes">
通知通告
</label>
</p>
<p>
<label>
<input type="checkbox" class="DaysNew" value="zhuanxiangguanli" name="subscibes">
专项管理
</label>
</p>
</td>
</tr>
</form>
</tbody>
</table>
<div class="opt text-center">
<button type="submit" class="btn btn-accept">订阅</button>
<button type="reset" class="btn btn-default">全部退订</button>
</div>
</fieldset>
</div>
</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. ceph hadoop spark 大数据处理

    http://docs.ceph.com/docs/giant/cephfs/hadoop/ https://indico.cern.ch/event/524549/contributions/218 ...

  2. 页置换算法FIFO、LRU、OPT

    页置换算法FIFO.LRU.OPT 为什么需要页置换 在地址映射过程中,若在页面中发现所要访问的页面不再内存中,则产生缺页中断.当发生缺页中断时操作系统必须在内存选择一个页面将其移出内存,以便为即将调 ...

  3. BZOJ 4742: [Usaco2016 Dec]Team Building

    4742: [Usaco2016 Dec]Team Building Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 21  Solved: 16[Su ...

  4. Linux哲学思想--基本法则

    1.一切皆文件: 2.单一目的的小程序: 3.组合小程序完成复杂任务: 4.文本文件保存配置信息: 5.尽量避免捕获用户接口: 6.提供机制,而非策略. 自从Linux一诞生就注定了其成为经典的命运. ...

  5. 项目中angular js的接口url统一管理

    为了防止环境改变时需要修改多处接口的url,项目中用到了一个config.json文件来统一管理url: 在src下建立config文件夹,创建config.json文件,主要内容如下: { &quo ...

  6. 统一的Json组件和csv下载组件

    java-web-common java-web-common Json组件 目标和用途 规范Json接口格式 Controller中一律返回Java object,组件将自动转换数据格式,满足Jso ...

  7. JavaScript系列文章:不能不看的数据类型检测

    由于JavaScript是门松散类型语言,定义变量时没有类型标识信息,并且在运行期可以动态更改其类型,所以一个变量的类型在运行期是不可预测的,因此,数据类型检测在开发当中就成为一个必须要了解和掌握的知 ...

  8. 数据结构作业——buzhidao(队列)

    buzhidao Description 有一个长度为 n 的序列,第 i 个数的大小为 a[i].现在从第 1 个数开始从左往右进行以下操作:1. 如果当前数是剩下的数中最大的,则输出并删去这个数. ...

  9. 关于Array的map方法中回调函数参数的问题

    开门见山,我们先来看两个例子. var arr=['1','4','9','16']; var r=arr.map(Math.sqrt); 猜猜r的结果会是多少? 没错就是 [1,2,3,4] 我们再 ...

  10. 配置hadoop

    1.$ tar -zxvf  hadoop-1.0.3.tar.gz 2.添加hadoop到环境变量 root登陆: sudo su 修改环境变量:vi  /etc/environment 添加: / ...