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