基于jQuery按关联链接获取对应类选中复选框并解决数组冗余问题

嘿，这个问题我之前做类似问答系统的时候也踩过坑！核心原因就是你的全局optionsArr在切换问题后没有清理掉之前问题的选中项，导致新旧问题的选项ID混在一起，提交时自然就带出了之前的内容。下面给你两种可行的修改思路：

思路一：切换问题时重置数组并同步当前问题的选中状态 #

这种方法比较直接，核心是在用户点击问题导航切换时，把optionsArr重置为当前显示问题的已选中选项ID，同时更新当前问题的标识。

步骤1：添加问题导航的点击事件处理 #

假设你的问题导航链接带有类名js-question-nav，并且通过data-question-id存储对应问题的ID，添加如下代码：

// 监听问题导航切换事件
$(document).on('click', '.js-question-nav', function(e){
    e.preventDefault();
    // 获取当前要切换到的问题ID
    currentQuestionID = $(this).data('question-id');
    // 重置optionsArr为当前问题已选中的复选框ID数组
    optionsArr = $('.js-answer-check[data-question="' + currentQuestionID + '"]:checked').map(function(){
        return $(this).data('id');
    }).get();
    // 更新全局的questionID变量
    questionID = currentQuestionID;
});

步骤2：优化复选框点击事件 #

在原有的点击事件中，增加判断，确保只处理当前显示问题的复选框，避免误操作其他问题的选项：

var optionsArr = [];
var questionID;

$(document).on('click', '.js-answer-check', function(e){
    var clickedQuestionID = $(this).data('question');
    // 跳过非当前问题的复选框操作
    if (clickedQuestionID !== questionID) {
        return;
    }

    var optionID = $(this).data('id');
    if ($(this).is(':checked')){
        // 避免重复添加（比如页面初始化已选中的情况）
        if (!optionsArr.includes(optionID)) {
            optionsArr.push(optionID);
        }
    } else {
        // 移除对应的选项ID
        optionsArr = $.grep(optionsArr, function(value){
            return value !== optionID;
        });
    }
});

思路二：按问题ID分组存储选中项（更健壮的方案） #

如果你的系统后续可能支持多问题的状态保留（比如用户可以来回切换问题而不丢失之前的选择），可以用对象来按问题ID分组存储每个问题的选中项，这样各个问题的选中状态完全隔离，不会互相干扰。

修改后的完整代码： #

// 用对象存储每个问题的选中项，key为问题ID，value为选项ID数组
var selectedOptions = {};
var currentQuestionID;

// 监听问题导航切换事件
$(document).on('click', '.js-question-nav', function(e){
    e.preventDefault();
    currentQuestionID = $(this).data('question-id');
    // 如果该问题还没有存储的选中项，初始化并同步页面已选中状态
    if (!selectedOptions[currentQuestionID]) {
        selectedOptions[currentQuestionID] = $('.js-answer-check[data-question="' + currentQuestionID + '"]:checked').map(function(){
            return $(this).data('id');
        }).get();
    }
});

// 复选框点击事件
$(document).on('click', '.js-answer-check', function(e){
    var clickedQuestionID = $(this).data('question');
    var optionID = $(this).data('id');

    // 只处理当前显示问题的复选框
    if (clickedQuestionID !== currentQuestionID) {
        return;
    }

    // 确保当前问题的选中数组已初始化
    if (!selectedOptions[currentQuestionID]) {
        selectedOptions[currentQuestionID] = [];
    }

    if ($(this).is(':checked')){
        if (!selectedOptions[currentQuestionID].includes(optionID)) {
            selectedOptions[currentQuestionID].push(optionID);
        }
    } else {
        selectedOptions[currentQuestionID] = selectedOptions[currentQuestionID].filter(function(id){
            return id !== optionID;
        });
    }

    // 提交时只需取当前问题的选中数组即可
    // var submitData = selectedOptions[currentQuestionID] || [];
});

这两种方案都能解决你遇到的数组冗余问题，思路一更适合简单的单问题切换场景，思路二更适合需要保留多问题选择状态的复杂场景，你可以根据自己的需求来选。

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