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);
})

　　





　　






            

            
posted @ 
2018-10-17 14:33 
yanye411325 
阅读(362) 
评论(0) 
 
收藏 
举报