循环中Radio Button可多选问题求助（Laravel+前端技术栈）

问题原因 #

核心问题是每个单选按钮都被包裹在独立的<form>标签内。HTML的单选按钮互斥功能依赖两个关键条件：

• 所有互斥的单选按钮必须拥有相同的name属性
• 它们必须处于**同一个<form>标签（或同一文档上下文）**中
  不同表单里的同名单选框不会互相约束，自然就变成了类似复选框的可多选状态。

修复方案 #

把<form>标签移到@foreach循环外部，让所有单选框共享同一个表单上下文，同时可以优化单选框的value属性（直接绑定预设ID，减少冗余的隐藏输入框）。

修改后的代码示例 #

<form method="POST">
    @foreach ($user_presets as $user_preset)
        <div class="w-full sm:w-full lg:w-full 2xl:w-full">
            <div class="single-preset w-full rounded-lg border border-[#F3F4FE] bg-white shadow-2xl shadow-slate-200">

                @php
                    $cardNumber = 'card' . $loop->index;
                @endphp

                <div class="p-4 sm:p-8 lg:px-6 xl:px-8" @click="openCard = @js($cardNumber)">
                    <div class="dark:border-navy-500">
                        <div class="grid grid-cols-5">
                            <div class="flex items-center space-x-2 col-span-4">
                                <label class="inline-flex items-center space-x-2 w-full" for="{{ $cardNumber }}">
                                    <input class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                                        type="radio"
                                        id="{{ $cardNumber }}"
                                        value="{{ $user_preset->id }}"
                                        name="preset_id"
                                        onclick="getSelectedPresetValue()" />
                                    <h4 class="text-lg font-medium text-slate-700 dark:text-navy-100">
                                        {{ $user_preset->preset_name }}
                                    </h4>
                                </label>
                            </div>

                            <div class="flex justify-end col-span-1">
                                <h4 class="text-lg font-medium text-slate-500 dark:text-navy-100 ">
                                    ${{ sprintf('%.2f', $user_preset->unit_price) }}
                                </h4>
                                <input type="hidden" name="sub_total_price_{{ $user_preset->id }}" value="{{ $user_preset->unit_price }}" />
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Accordion Area --}}
                <div x-show="openCard == @js($cardNumber)" x-collapse.duration.1000ms class="faq-content">
                    <ul class="list-none divide-y-2 divide-slate-200  card-{{ $cardNumber }}">

                        <li class="font-semibold py-3 flex justify-between px-4 sm:px-8 lg:px-6 xl:px-8">
                            <span>Invoice Type</span>
                            <span> {{ $user_preset->invoiceType->invoice_type_name ?? '' }} </span>
                        </li>

                        <li class="font-semibold py-3 flex justify-between px-4 sm:px-8 lg:px-6 xl:px-8">
                            <span>Shadow Type</span>
                            <span>{{ $user_preset->shadowType->shadow_type ?? '' }}</span>
                        </li>
                    </ul>
                </div>
                
            </div>
        </div>
    @endforeach
</form>

额外说明 #

• 把单选框的name改为preset_id，并将value直接设为{{ $user_preset->id }}，提交表单时就能直接获取选中的预设ID，无需额外的隐藏输入框。
• 如果需要同时提交对应选中项的单价，可以给隐藏输入框加ID后缀（比如sub_total_price_{{ $user_preset->id }}），后续通过JS或后端逻辑根据选中的preset_id匹配对应的单价。

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