不多说看例子:
右上侧全选,然后每个栏又有一个栏目全选。
反选解决办法:
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>