jq 操做表單中 checkbox 全選單選

時間 2019-12-11

標籤表單 checkbox 全選單選欄目 JavaScript 简体版

原文原文鏈接

知識點： javascript

Note: html

1：java

　　.prop() 和 .attr() 方法的區別ui

　　　　.prop() 針對標籤既有屬性this

　　　　.attr() 針對自定義屬性3d

2:htm

$('input:checked')即爲選中元素。blog

---------------------------------------------------ip

場景——項目管理需求以下圖：utf-8

選中所有或部分成果名稱跳轉帶至下個頁面

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

jq 操做表單中 checkbox 全選 單選

jq 操做表單中 checkbox 全選單選