jq 操作表單中 checkbox 全選 單選
阿新 • • 發佈：2018-11-11
知識點：
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);
})