Laravel单选按钮状态保持问题求助：切换问题时选中状态丢失

嗨，这个问题的根源一眼就能看出来——你所有问题的单选按钮都共用了同一个name="opt"属性！单选按钮的规则是同一个name的选项属于同一组，互斥选择，所以你选了第二个问题的选项时，第一个问题的选中状态就会被自动取消，这就是状态丢失的原因。

解决方案：给每个问题的单选组添加唯一标识 #

我们需要让每个问题的选项组拥有独立的name，同时确保id属性唯一（页面内ID不能重复，否则label关联会出问题）。最简单的方式就是利用问题的id来区分，具体修改如下：

修改后的视图代码：

<h2>Welcome to Online Teacher Verification Test:</h2>
@foreach($qns as $qn)
    <h3>{{$qn->question_name}}</h3>
    <div class="form-check">
        <label class="form-check-label" for="opt1_{{$qn->id}}">
            <input type="radio" class="form-check-input" id="opt1_{{$qn->id}}" name="opt_{{$qn->id}}" value="opt1">{{$qn->opt1}}
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label" for="opt2_{{$qn->id}}">
            <input type="radio" class="form-check-input" id="opt2_{{$qn->id}}" name="opt_{{$qn->id}}" value="opt2">{{$qn->opt2}}
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label" for="opt3_{{$qn->id}}">
            <input type="radio" class="form-check-input" id="opt3_{{$qn->id}}" name="opt_{{$qn->id}}" value="opt3">{{$qn->opt3}}
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label" for="opt4_{{$qn->id}}">
            <input type="radio" class="form-check-input" id="opt4_{{$qn->id}}" name="opt_{{$qn->id}}" value="opt4">{{$qn->opt4}}
        </label>
    </div>
@endforeach

修改细节说明： #

• name属性：从name="opt"改成name="opt_{{$qn->id}}"，这样每个问题的选项组都有了唯一名称，浏览器会把它们当成独立的单选组，互不干扰。
• id和for属性：给id加上_{{$qn->id}}后缀，同时同步修改label的for属性，确保每个label只关联对应问题的选项，避免页面内ID重复导致的交互异常。
• 额外给问题标题添加了<h3>标签，让每个问题的结构更清晰，用户体验更好。

这样修改后，你选中任意问题的选项，切换到其他问题时，之前的选中状态就会正常保留啦～

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