Laravel中使用@foreach渲染radio按钮时如何实现单选功能？

radio按钮实现单选的核心要求是：同组内的所有radio必须设置相同的name属性，浏览器通过这个属性识别哪些按钮属于同一组，从而限制只能选中一个。你的代码里生成的radio缺少统一的name，同时label的for属性也未和对应radio的id匹配，这两个问题导致了单选失效。

修改后的Blade代码 #

<div class="col-9">
    <form>
        <div class="multiselect">
            <div class="selectBox" onclick="showCheckboxes()">
                <select>
                    <option placeholder="www"></option>
                </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
                @foreach ($subjects as $subject)
                <label for="subject-{{ $subject->id }}">
                    <input type="radio" id="subject-{{ $subject->id }}" name="subject_id" value="{{ $subject->id }}"/>
                    {{ $subject->name }}
                </label>
                @endforeach
            </div>

            @error('subjects')
            <small class="form-text text-danger">{{ $message }}</small>
            @enderror
        </div>
    </form>
</div>

修改说明 #

• 给所有radio添加了相同的name="subject_id"，确保它们属于同一单选组
• 为每个radio设置了唯一的id="subject-{{ $subject->id }}"，同时让对应label的for属性匹配这个id，保证点击标签能选中对应radio

原JavaScript代码无需修改 #

<script>
    var expanded = false;

    function showCheckboxes() {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded) {
            checkboxes.style.display = "block";
            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }
</script>

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