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=& ...
随机推荐
- chainsql异常记录
- 第四十一篇-android studio 关闭自动保存功能
此方法不可用. 第一步:取消自动保存功能 File > Settings > Appearance & Behavior > System Settings > Syn ...
- linux环境下安装lnmp出现php安装失败
找到lnmp1.5/include/version.sh文件打开修改 #Freetype_Ver='freetype-2.7' 为 #Freetype_Ver='freetype-2.9'即可
- textCNN原理
一.TextCnn的结构 1. 嵌入层(embedding layer) textcnn使用预先训练好的词向量作embedding layer.对于数据集里的所有词,因为每个词都可以表征成一个向量,因 ...
- linux批量压缩当前目录中文件后，删除原文件
linux批量压缩当前目录中文件后,删除原文件 for i in `ls|awk -F " " '{print $NF}'`; do tar -zcvf $i.tar.gz $i ...
- Git打标签、还原到具体标签版本代码
1.打标签:(在需要合并的分支上先打一个标签,方便回滚) $ git tag 标签名 -----此标签将打在本地,还需要推送至远程仓库 $ git push origin 标签名 -----此步骤执行 ...
- 虚拟代理模式-Virtual Proxy(Java实现)
虚拟代理模式-Virtual Proxy 虚拟代理模式(Virtual PRoxy)会推迟真正所需对象实例化时间. 在需要真正的对象工作之前, 如果代理对象能够处理, 那么暂时不需要真正对象来出手. ...
- Web_0002：关于MongoDB的操作
1,启动moggdb服务端 打开cmd命令窗口进入到MongoDB的安装目录bin文件下: 如: cd /d F:\Program Files\mongodb\bin 执行如下命令(该命令窗口为 ...
- TortoiseSVN新人使用指南
http://blog.csdn.net/maplejaw_/article/details/52874348
- 视频显著性检测-----Predicting Video Saliency using Object-to-Motion CNN and Two-layer Convolutional LSTM
帧内显著性检测: 将卷积网络的多层特征进行组合通过unsampling 得到粗显著性预测: 帧间显著性检测: (粗检测结果+新卷积网络的特征图,最后+之前卷积网络的卷积特征输入到LSTM中)进行预测. ...