jQuery MVC 如何获取同一div id下不同类名的checkbox选中值

你之前的代码存在两个核心问题：

• 遍历粒度是单元格<td>而非行<tr>，无法把同一家公司的名称、年份checkbox关联起来
• 选择年份checkbox时用了全局选择器，没有限定在当前行，只会获取到页面第一个对应类的checkbox值

优化方案 #

1. 可选优化：先调整HTML渲染逻辑 #

你现有的while循环逻辑有小问题，i每次加1但判断i+1是否存在，会导致最后一行出现空td，且行和公司的对应关系容易混乱，建议调整为每行对应一家公司：

@{
    foreach (var company in Model.CompanyMaster)
    {
        <tr>
            <td style="width:50%" hidden="hidden"><input type="checkbox" class="EntityCheck CompanyIdCheck" /> @company.COMPANYID</td>
            <td><input type="checkbox" class="EntityCheck CompanyNameCheck" /> @company.COMPANY_NAME</td>
            <td><input type="checkbox" class="CurrentYear" value="@DateTime.Now.Year" /> @DateTime.Now.Year </td>
            <td><input type="checkbox" class="PreviousYear" value="@DateTime.Now.AddYears(-1).Year" /> @DateTime.Now.AddYears(-1).Year </td>
            <td><input type="checkbox" class="LastYear" value="@DateTime.Now.AddYears(-2).Year" /> @DateTime.Now.AddYears(-2).Year </td>
        </tr>
    }
}

这里给checkbox补充了value属性方便直接取值，也给公司ID、名称的checkbox加了更细分的类名方便区分

2. 修改jQuery获取逻辑 #

如果已经调整了上面的HTML渲染，用下面的代码即可：

function GetSelectedEntities() {
    const entities = [];
    // 遍历div下的每一行数据
    $("#divEntities table tr").each(function () {
        const $currentRow = $(this);
        // 先判断当前行的公司名称checkbox是否选中，未选中直接跳过
        const nameCheck = $currentRow.find('.CompanyNameCheck');
        if (!nameCheck.length || !nameCheck.prop('checked')) return;

        // 取当前行的公司ID、名称
        const companyId = $currentRow.find('.CompanyIdCheck').parent().text().trim();
        const companyName = nameCheck.parent().text().trim();

        // 收集当前行选中的年份
        const selectedYears = [];
        $currentRow.find('.CurrentYear:checked').each(() => selectedYears.push($(this).val()));
        $currentRow.find('.PreviousYear:checked').each(() => selectedYears.push($(this).val()));
        $currentRow.find('.LastYear:checked').each(() => selectedYears.push($(this).val()));

        if (selectedYears.length) {
            // 可根据需求调整拼接格式，示例为"公司ID:公司名称:年份1,年份2"
            entities.push(`${companyId}:${companyName}:${selectedYears.join(',')}`);
        }
    });
    // 用|分隔所有条目返回
    return entities.join('|');
}

如果你不想修改原有HTML渲染逻辑，只想修改jQuery代码，可直接用下面的版本适配原有结构：

function GetSelectedEntities() {
    let entities = "";
    $("#divEntities table tr").each(function () {
        const $currentRow = $(this);
        const entityChecks = $currentRow.find('input.EntityCheck');
        // 确保当前行有有效数据，且公司名称checkbox已选中
        if (entityChecks.length < 2 || !entityChecks.eq(1).prop('checked')) return;

        const companyId = entityChecks.eq(0).parent().text().trim();
        const companyName = entityChecks.eq(1).parent().text().trim();
        const selectedYears = [];

        // 仅在当前行查找选中的年份
        $currentRow.find('.CurrentYear:checked').each(() => selectedYears.push($(this).parent().text().trim()));
        $currentRow.find('.PreviousYear:checked').each(() => selectedYears.push($(this).parent().text().trim()));
        $currentRow.find('.LastYear:checked').each(() => selectedYears.push($(this).parent().text().trim()));

        if (selectedYears.length) {
            const item = `${companyId}|${companyName}|${selectedYears.join(',')}`;
            entities = entities ? `${entities}|${item}` : item;
        }
    });
    return entities;
}

核心修改点说明 #

• 遍历对象从<td>改为<tr>，确保同一家公司的所有checkbox在同一个上下文里
• 查找年份checkbox时用$currentRow.find()限定在当前行内，避免获取到其他行的元素
• 先判断公司名称的checkbox是否选中，选中了才收集该行的年份数据
• 直接通过:checked选择器过滤已选中的checkbox，不需要额外判断状态

内容的提问来源于stack exchange，提问作者shyam