jQuery获取子元素值异常：所有选择题均返回最后一次点击的选项

• 选择器范围错误：jQuery代码中ele.parents("div")会匹配当前元素向上所有层级的div元素，页面内所有题目容器都是div结构，赋值时会把所有题目的.user_answer和.answer_status都覆盖，所以不管选哪道题，所有题的答案都会被改成最后一次点击的选项值。
• 控件类型不匹配：你要实现多选题场景，但是用了type="radio"单选框，同一个name属性的单选框全局只能选一个，不符合多选需求。
• 渲染异常：从你给出的最终HTML可以看到，单选框的value属性是空值，是Blade模板输出{{$question_option->correct_option_name}}时的语法问题，可检查对应字段是否存在、模板里的换行空格有没有影响输出。

1. Blade模板修改 #

<form action="{{url('user-test-submition')}}" method="post">
@csrf
<div class="card">
    <div class="card-body text-center" style="background: black;color:white">
        <p><i class="fas fa-clock mr-4"></i><b>Remaining Time : <span id="time">{{$test_info->duration}}</span> minutes!</b></p>
    </div>
    <input type="text" value="{{$test_info->test_name}}" name="test_name">
    <input type="text" value="{{$test_info->id}}" name="test_id">
    <input type="text" value="4" name="user_id">
    @foreach($test_questions as $test_question)
    <div class="card-body test-question" data-id="{{$test_question->id}}">
        <p><b>{{$test_question->question_number}} ) {{$test_question->question}}</b></p>
        <input type="text" class="correct_answer" value="{{$test_question->correct_option_name}}" name="correct_answer[]">
        <input type="text" value="{{$test_question->id}}" name="test_question_id[]">
        <input type="text" class="user_answer" value="" name="user_answer[]">
        <input type="text" class="answer_status" value="" name="answer_status[]">
        @foreach($test_question->questions as $question_option)
        <label data-id="{{$question_option->id}}" class="get_user_option">
            <!-- 单选改多选：type从radio改成checkbox，name加[]支持多值提交 -->
            <input type="checkbox" class="answer_option" value="{{$question_option->correct_option_name}}" name="{{$question_option->question_id}}[]" />
            <span class="option_content">{{$question_option->option_name}}</span> {{$question_option->option_content}}
        </label>
        @endforeach
    </div>
    @endforeach
    <input type="submit" class="btn btn-danger" name="">
</div>
</form>

2. jQuery代码修改 #

$(document).ready(function(){
  $('.answer_option').on('change',function(e){
   e.preventDefault();
   var ele = $(this);
   // 精准定位到当前题目的容器，只修改当前题的相关字段，不会影响其他题目
   var currentQuestion = ele.closest(".test-question");
   // 多选场景：收集当前题所有选中的选项值
   var selectedOptions = [];
   currentQuestion.find(".answer_option:checked").each(function(){
       selectedOptions.push($(this).siblings(".option_content").text());
   });
   // 把选中值用逗号拼接后填入user_answer
   currentQuestion.find(".user_answer").val(selectedOptions.join(','));
   // 只要有选中的选项就把状态设为1
   currentQuestion.find(".answer_status").val(selectedOptions.length > 0 ? 1 : '');
   // 打印当前选项的正确值验证
   var correct_answer = ele.val();
   console.log(correct_answer);
 })
});

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