Javascript 如何在每次单击不同按钮时始终获取新的复选框数组

我正在开发一个关于测验的应用程序

IMG1:[图中添加的注释也适用于IMG2]

IMG2：

说明：

[IMG1]当选中一个或多个

.js应答检查

复选框时，我将值保存在js数组中。然后，当单击

#save response

按钮时，相应的数组被发送到服务器，保存在数据库中

[IMG2]然后单击测验的另一个问题，由

.quick questions

类标识，当选中此新问题的一个或多个

.js answer check

复选框时，值保存在同一js数组中

问题在于，由于

answers.push（answerID）

，来自先前答案的先前复选框值仍然存在于数组中

如何在每次单击

.quick questions

按钮时仅获取数组中相应问题答案的值

预期值：

单击第一个问题=>数组中标签为“2”的复选框应为[2]（该复选框中的data id=“2”属性）

在第二个问题=>数组中单击标签为“1+3”和“8/2”的复选框应为[4,5]，因为这些复选框具有data id=“4”和data id=“5”属性

实际结果：[2,4,5]

我尝试了以下代码：

//if one|more options are checked...
var answers = [];
$(document).on('click', '.js-answer-check', function(){
    if ($(this).is(':checked')){
        var answerID = $(this).data('id');
        answers.push(answerID);
    } else {
        var removeItem = $(this).data('id');
        answers = $.grep(answers, function(value){
            return value != removeItem;
        });
    }
});

$('#save-response').on('click', function(e){
    e.preventDefault();
    $.ajax({
        method: 'POST',
        url: Routing.generate('save_answer'),
        data: { answers: answers },
        success: function(resp) {
            if (resp.success) {
                var answersBack = resp.answers;
                for (var ans in answersBack) {
                    console.log('answerID = ', answersBack[ans]);
                }
            }
            //answers = [];
        }
    });
});

我想如果我这样做，

answers=[]

将重置初始数组，但它没有

欢迎任何帮助。谢谢

以后编辑

<div class="row margin-top-ten">
    <div class="col-6">
        <input type="hidden" id="quiz-id" data-quiz="{{ quiz.id }}"/>
        <div class="row question-content">{# the content (question-text + checkboxes) is coming from an AJAX request because I need to present everytime a new content based on `quiz-questions` buttons #}
        </div>
    </div>
</row>

<div class="row margin-top-ten">
    <div class="col-12">
        <button class="btn btn-primary btn-sm" type="button" id="save-response">Salveaza</button>
    </div>
</div>

<div class="row margin-top-fifty">
    <div class="col-12">
        {% set i = 1 %}
        <p>Navigator intrebari:</p>
        {% for question in quiz.questions %}
            <a href="" class="btn btn-info btn-sm quiz-question"
                               data-id="{{ question.id }}" data-quiz="{{ quiz.id }}">
                {{ i }}
            </a>
            {% set i = i + 1 %}
        {% endfor %}
    </div>
</div>

---

php的

save\u-answer

php功能只是返回发送的数据，用于调试目的。没什么特别的。

重置答案数组应该可以解决问题。那是我唯一能想到的。但是为什么不使用ajax提交表单呢？这样，您就不必跟踪所选项目的列表，因为html表单可以帮您完成这项工作。@Leroy我已经通过AJAX发送了答案。请提供相关的html，而不是按照提供的图像，以便其他人可以测试您的代码OK@charlietfl，检查我以后的编辑。谢谢，根据answer的说法，我所需要做的是，不是

answers=[]

，而是

answers.length=0

。

<div class="col-12">
    <div class="row">
        <div class="col-12 question-text" data-question="{{ question.id }}">{{ question.content|raw }}</div>
    </div>
    <div class="row">
        {% for answer in question.answers %}
            <div class="col-12 question-answers">
                <span style="display: inline-block">
                    <label for="">
                        <input type="checkbox" name="user-responses[]" class="js-answer-check" data-question="{{ question.id }}" data-id="{{ answer.id }}">
                    </label>
                </span>
                <span style="display:inline-block">{{ answer.answer|raw }}</span>
            </div>
        {% endfor %}
    </div>
</div>