如何通过getCheckbox()函数弹窗显示选中复选框所在行的全部信息？

架构老林

2026-7-24

修改方案

1. 修正循环逻辑（解决原代码硬编码循环次数问题）

原函数中for (i=0; i<4; i++)固定循环4次，不符合动态生成的复选框数量，需改为遍历所有.checks元素：

for (let i=0; i<checks.length; i++) {

2. 获取选中行信息并拼接输出

针对每个选中的复选框，定位其所在表格行，提取行内各列内容后拼接成可读格式弹窗输出。

修改后的完整getCheckbox()函数：

function getCheckbox() {
    var checks = document.getElementsByClassName('checks');
    var selectedInfo = '';

    for (let i=0; i<checks.length; i++) {
        if (checks[i].checked === true){
            // 定位当前复选框所在的表格行
            const row = checks[i].closest('tr');
            // 从行内提取各字段内容
            const idNum = row.querySelector('td:first-child h6').textContent.trim();
            const title = row.querySelector('.checks-title').textContent.trim();
            const type = row.querySelector('.checks-type h6').textContent.trim();
            const date = row.querySelector('.checks-date').textContent.trim();
            const slug = row.querySelector('.checks-url').textContent.trim();
            
            // 拼接成易读的信息格式
            selectedInfo += `ID: ${idNum}\n标题: ${title}\n类型: ${type}\n日期: ${date}\n链接标识: ${slug}\n\n`;
        }
    }

    // 弹窗输出结果，无选中项时给出提示
    if (selectedInfo) {
        alert('选中的行信息:\n' + selectedInfo);
    } else {
        alert('未选中任何行');
    }
}