jq 操作表单中 checkbox 全选 单选
知识点：
Note:
1：
.prop() 和 .attr() 方法的区别
.prop() 针对标签既有属性
.attr() 针对自定义属性
2:
$('input:checked')即为选中元素。
---------------------------------------------------
场景——项目管理需求如下图：
选中全部或部分 成果名称 跳转带至下个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body> <div class="tableWrap">
<table>
<thead>
<tr>
<td class="checkBox">
<label>
<input class="totalCheck"
type="checkbox"> </label>
</td>
<td>成果名称</td>
<td>所属单位</td>
<td>归属产业</td>
<td>成果分类</td>
<td>成果所属项目</td>
<td>成果收益</td>
<td>时间</td>
<td>详情</td>
</tr>
</thead>
<tbody>
<tr>
<td class="checkBox">
<label>
<input class="elCheck"
type="checkbox"
name="subCheck"> </label>
</td>
<td class="proName">5546</td>
<td>sa;djfolskfj</td>
<td>spdjfl;ksf</td>
<td>s;ldfk</td>
<td>sosidjfo</td>
<td>lskjflksdf</td>
<td>sldjfl</td>
<td>
<a href="javascript:;">进入详情</a>
</td>
</tr>
<tr>
<td class="checkBox">
<label>
<input class="elCheck"
type="checkbox"
name="subCheck"> </label>
</td>
<td class="proName">65+</td>
<td>sa;djfolskfj</td>
<td>spdjfl;ksf</td>
<td>s;ldfk</td>
<td>sosidjfo</td>
<td>lskjflksdf</td>
<td>sldjfl</td>
<td>
<a href="javascript:;">进入详情</a>
</td>
</tr>
<tr>
<td class="checkBox">
<label>
<input class="elCheck"
type="checkbox"
name="subCheck"> </label>
</td>
<td class="proName">656546+</td>
<td>sa;djfolskfj</td>
<td>spdjfl;ksf</td>
<td>s;ldfk</td>
<td>sosidjfo</td>
<td>lskjflksdf</td>
<td>sldjfl</td>
<td>
<a href="javascript:;">进入详情</a>
</td>
</tr>
<tr>
<td class="checkBox">
<label>
<input class="elCheck"
type="checkbox"
name="subCheck"> </label>
</td>
<td class="proName">65+</td>
<td>sa;djfolskfj</td>
<td>spdjfl;ksf</td>
<td>s;ldfk</td>
<td>sosidjfo</td>
<td>lskjflksdf</td>
<td>sldjfl</td>
<td>
<a href="javascript:;">进入详情</a>
</td>
</tr>
<tr>
<td class="checkBox">
<label>
<input class="elCheck"
type="checkbox"
name="subCheck"> </label>
</td>
<td class="proName">656546+</td>
<td>sa;djfolskfj</td>
<td>spdjfl;ksf</td>
<td>s;ldfk</td>
<td>sosidjfo</td>
<td>lskjflksdf</td>
<td>sldjfl</td>
<td>
<a href="javascript:;">进入详情</a>
</td>
</tr>
</tbody>
</table>
<div class="btnWrap clearfix">
<button class="psszBtn">评审设置</button>
</div>
</div>
</body>
</html>
js
$('.totalCheck').change(function(){
$('.elCheck').prop('checked',$(this).prop('checked'));
})
checkFun();
function checkFun(){
$('.elCheck').click(function(){
if(!$(this).prop('checked')){
$('.totalCheck').prop('checked',false);
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
}
$('.psszBtn').click(function(){
var proNameArr= [];
for(var i = 0; i< $('input:checked').length;i++){
proNameArr[i] = {
'id':i, //项目ID
'proName':$('input:checked').eq(i).parents('td').siblings('.proName').text()
};
};
console.log(proNameArr);
})
jq 操作表单中 checkbox 全选 单选的更多相关文章
- checkbox 全选 单选的使用
绑定数据 if (!IsPostBack) { using (UsersDataContext con = new UsersDataContext()) { Repeater1.DataSource ...
- 练习-checkbox 全选 ，反选， 单选，以及取值
1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- vue开发购物车，解决全选单选问题
实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...
- checkbox全选/取消全选
//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...
- TreeView checkbox 全选
在使用TreeView 控件 ,进行权限管理的时候,需要使用 checkbox全选. 勾选父节点,子节点全部选中.取消父节点,子节点不选中. 勾选子节点,父节点也选中. 以下是在使用的例子: < ...
- JS checkbox 全选 全不选
/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
- checkbox全选，反选，取消选择 jquery
checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
随机推荐
- 本机Jenkins的使用
1.启动jenkins: 命令:java -jar D:\toolspackage\jenkins\jenkins.war 打开jenkins网页:http://localhost:8080/ 2. ...
- <知识整理>树--堆及其应用
预备知识: 完全二叉树的定义:一个深度为k数的二叉树(设根节点的深度为1),若二叉树深度从1到k-1层都是满的,而第k层的节点都集中在左边(即第k层不存在两节点之间有空缺),那么此数就被叫做完全二叉树 ...
- 高并发环境下全局id生成策略
解决方案: 基于Redis的全局id生成策略:(推荐此方法) 基于雪花算法的全局id生成: https://www.cnblogs.com/kobe-qi/p/8761690.html 基于zooke ...
- Mongodb分片集群技术+用户验证
随着数据量持续增多,后续迟早会出现一台机器硬件瓶颈问题的.而mongodb主打的就是海量数据架构,“分片”就用这个来解决这个问题. 从图中可以看到有四个组件:mongos.config server. ...
- Python 中使用 matplotlib 绘图中文字符显示异常的问题
最近在使用 Python matplotlib 绘制图表时发现中文字符不能正确显示:比如在绘制折线图时,中文全部显示成▢▢▢的格式,虽然将数据改成英文就没什么问题,但是所有数据都这么做时不可行的,于是 ...
- 操作系统层面聊聊BIO，NIO和AIO (epoll)
BIO 有了Block的定义,就可以讨论BIO和NIO了.BIO是Blocking IO的意思.在类似于网络中进行read, write, connect一类的系统调用时会被卡住. 举个例子,当用re ...
- S2-045漏洞初步分析
0x01 前言 前几天刚分析完s2-032这个漏洞,今天又爆发了一个s2-045的漏洞,又是直接的命令执行,影响了struts2绝大多数的版本. 官方给的漏洞公告在这里 https://cwiki ...
- 这是一个蒟蒻的计划……QAQ
感觉像我这种拖拉的人很有可能是完成不了的,挂上来相当于监督我自己啦QWQ [学习计划] [√]1.去看Trie树!!! yyb学长的blog 2.KMP还有AC自动机 先贴两个链接在这里吧:KMP ...
- Codeforces Round #542 (Div. 1) 题解
开学了住校了打不了深夜场 好难受啊QwQ A 显然对于每个起点,我们只需要贪心记录这个起点出发出去的糖果数量以及离自己最近的糖果 因为这个起点最后一次装载糖果一定是装载终点离自己最近的那个糖果 $ O ...
- C# - 设计模式 - 虚模式
虚模式 问题场景 子类从抽象派生是为了解耦,但为了适应新的变化,可能需要向抽象类添加新功能,假如在添加新功能之前已经有100个子类实现了抽象,那么接下来你得在100个子类中去重写向抽象添加的新功能. ...