不多说看例子:

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

反选解决办法:

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. 关于闭包(closure)的一些概念

    和其他大多数现代编程语言一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.为了实现这种词法作用域,JS函数对象的内部状态不仅包含 ...

  2. maven上传jar到nexus本地仓库

    一.nexus新增本地仓库 Hosted Repository:本地仓库,部署组织内部的版本内容 Proxy Repository:代理仓库,代理远程的公共仓库,如maven中央仓库 Virtual ...

  3. windows bat批处理语法简析

    第一节先介绍windows批处理.这个起源于跟旁边同事学习在windows用命令行办公,渐渐地有些批处理功能就需要了,于是专门抽出了几天学习了一下.我认为文档最重要的功能是为了备忘,择取了很多文档的例 ...

  4. 做web开发和测试,修改hosts指定某个域名访问某个特定的IP后,如何使hosts立即生效的方法

    本文转自SUN'S BLOG,原文地址:http://whosmall.com/post/143 hosts的配置方法: 在windows系统中,找到C:\windows\system32\drive ...

  5. UP Board 超详细开箱评测

    前言 原创文章,转载引用务必注明链接. 江浙沪就是好,昨天发货今天收到.另外爱板太省了,外包装小纸箱还是6s钢化膜的重复利用. 注意:拍照自带抖动功能,画质大家凑合着看.冬日天气干燥,手触摸板子前建议 ...

  6. linux 基础命令与文件管理

      Linux终端介绍 Shell提示符 Bash Shell基本语法 基本命令的使用:ls.pwd.cd 查看系统和BIOS硬件时间 Linux如何获得帮助 Linux关机命令:shutdow.in ...

  7. nuget包重装

    Update-Package -Reinstall Update-Package -reinstall -ProjectName Cardin.HeartCare.Service.ChatServic ...

  8. 基于ASP.NET MVC(C#)和Quartz.Net组件实现的定时执行任务调度

    http://www.cnblogs.com/bobositlife/p/aspnet-mvc-csharp-quartz-net-timer-task-scheduler.html 在之前的文章&l ...

  9. Android Studio使用Git版本控制工具

    1.File->Settings->Version Control->git 将git.exe地址copy进去 2.File->Settings->Version Con ...

  10. Libero 使用拾忆

    使用Libero软件进行管脚分配的时候可以使用脚本语言,详细的使用说明见des_constraints_ug.pdf(在Libero安装目录下寻找) 如: set_io srame_oe -REGIS ...