知识点：
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);
})