不多说看例子:

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

反选解决办法:

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. Shell命令_smem

    监控各个进程.用户的内存使用情况 基础条件:需要安装yum工具 centos 7.0 1.安装smem [root@VM_31_182_centos src]# yum install smem py ...

  2. C#知识点记录

    用于记录C#知识要点. 参考:CLR via C#.C#并发编程.MSDN.百度 记录方式:读每本书,先看一遍,然后第二遍的时候,写笔记. CLR:公共语言运行时(Common Language Ru ...

  3. bzoj3506 [Cqoi2014]排序机械臂

    bzoj3506 此题是一道比较简单的spaly题目. 用splay维护序列,将每个点排到对应的位置之后删除,这样比较容易区间翻转. 我的指针写法在洛谷上AC了,但在bzoj上RE. #include ...

  4. 今天开始学习java编程

    <java>程序设计教程与上机实验

  5. unsilder中的jq深入学习

    //trigger $('#foo').on('click', function() { alert($(this).text()); }); $('#foo').trigger('click'); ...

  6. Django基础,Day4 - views 详解

    在Django中,网页和其他内容是通过视图传递的.每个视图由一个简单的Python函数表示,Django将通过检查请求的URL(准确地说,是域名后面的部分URL)来选择一个视图. 例如,用户在浏览器中 ...

  7. git rebase

    git rebase -i HEAD~[number_of_commits] git rebase -i HEAD~2

  8. 详解SQL盲注测试高级技巧

    原文地址: http://www.freebuf.com/articles/web/30841.html

  9. css zoom属性兼容ie,firefox,chrome

    jquery代码: $("body").css({ "zoom":"2", "transform":"scal ...

  10. C# Byte[] 转String 无损转换

    C# Byte[] 转String 无损转换 转载请注明出处 http://www.cnblogs.com/Huerye/ /// <summary> /// string 转成byte[ ...