jq 操作表单中 checkbox 全选单选

知识点：

Note:

1：

　　.prop() 和 .attr() 方法的区别

　　　　.prop() 针对标签既有属性

　　　　.attr() 针对自定义属性

$(\'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>

$(\'.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);
})