checked 全选 反选 示例
不多说看例子:

右上侧全选,然后每个栏又有一个栏目全选。
反选解决办法:
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 全选 反选 示例的更多相关文章
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...
- 关于input全选反选恶心的异常情况
上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
随机推荐
- vue.js 第四课
(1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...
- 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法
手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...
- wpf xaml文件编辑出现中文乱码
突然有一天,发现在xaml文件编辑窗里打汉字出来了乱码...抓狂 结果发现是番茄助手搞得鬼.只能在编辑xaml文件是暂时关闭番茄助手 visual assist
- Mysql数据库 - 增删改
一. Create 1. 单条插入, sql格式: insert into (列名) values(列值); INSERT INTO test.tch_teacher ( Sex, BId, NO, ...
- c# String.Join 和 Distinct 方法 去除字符串中重复字符
1.在写程序中经常操作字符串,需要去重,以前我的用方式利用List集合和 contains去重复数据代码如下: string test="123,123,32,125,68,9565,432 ...
- [转]Pythoin中的Lambda表达式
引用自:http://www.cnblogs.com/evening/archive/2012/03/29/2423554.html 在学习python的过程中,lambda的语法时常会使人感到困惑, ...
- Reactjs+Webpack+es2015 入门HelloWord(一)
链接,自己很久前总结的blog. https://my.oschina.net/tangyuanyu/blog/730265
- Beta阶段第七次Scrum Meeting
Beta阶段第七次Scrum Meeting 情况简述 BETA阶段第七次Scrum Meeting 敏捷开发起始时间 2016/12/20 00:00 敏捷开发终止时间 2016/12/21 00: ...
- x509数字证书导入-然后删除自身
这种程序的使用场景,需要给客户一个证书,但不能把证书直接给他让他安装,程序中需要用到给客户的私钥,但又不允许客户将这个证书再去授权给其它人. 重点并不是代码,是如何对用户隐藏需要添加的资源 ,以文本为 ...
- oracle--第一天议--bai
第一天: 1 oracle的安装 a 卸载 b 安装服务器软件及数据库(orcl) --OracleServiceOrcl c 执行网络配置--配置监听1521,本地net服务名(创建1个外部连接的u ...