单选、多选表格行,获取选中行的id
作者:互联网
1. 表格结构
2. jQuery代码
// 全选和全不选点击事件
$('#allCkb').click(function () {
if ($('#allCkb').prop('checked') == true) {
$('[name=ckb]:checkbox').prop("checked", this.checked);
var ckbs = $("input[name=" + 'ckb' + "]:checked");
ckbs.each(function () {
var tr = $(this).parent().closest("tr");
var tdArr = tr.find("td");
var id = tr.attr("id");
selectedTaskId.push(id)
});
console.log("全选了,id是:" + selectedTaskId);
} else {
var ckbs = $("input[name=" + 'ckb' + "]:checked");
ckbs.each(function () {
var tr = $(this).parent().closest("tr");
var tdArr = tr.find("td");
var id = tr.attr("id");
selectedTaskId = selectedTaskId.filter(item => item != id);
});
console.log("全不选了,id是:" + selectedTaskId);
$('[name=ckb]:checkbox').prop("checked", false);
}
})
// checkbox点击事件
$('[name=ckb]:checkbox').change(function () {
var id = $(this).parent().closest("tr").attr("id");
if ($(this).prop('checked') == true) {
selectedTaskId.push(id);
console.log("点了" + selectedTaskId);
} else {
selectedTaskId = selectedTaskId.filter(item => item != id);
console.log("取消" + selectedTaskId);
}
});
3.效果
标签:checked,多选,selectedTaskId,tr,单选,var,id,name 来源: https://www.cnblogs.com/yddwinter/p/16223495.html