在 foreach 循环中，我使用了一个单选按钮，可以一次选择所有按钮答案

【问题标题】：In a foreach loop I used a radio button and all of them can be selected at once在 foreach 循环中，我使用了一个单选按钮，可以一次选择所有按钮
【发布时间】：2023-01-23 20:39:21
【问题描述】：

在此循环中，单选按钮的作用类似于复选框，因为它们都可以被选中。我已经多次查看代码，但找不到原因。在此页面中，我使用了：Tailwind、alpine、vanila-js、php 和 laravel。我不知道是什么导致了这个问题。

 @foreach ($user_presets as $user_preset)
        <form method="POST">
            <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
    
                    <input name="preset_id" value="{{ $user_preset->id }}" type="hidden" />
    
                    <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=""
                                            name="preset"
                                            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" 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>
        </form>
    @endforeach

【问题讨论】：

标签： javascript laravel radio-button alpine.js

【解决方案1】：

从您的代码中，您的输入不像复选框，因为它们具有相同的名称如果您希望每个都被选中，则将其命名为不同的例如：

<input  type="radio" id="{{ $cardNumber }}" value="" name="preset_{{$cardNumber}}" />

或者您可以通过这样命名您的输入来发送到后端数组：

<input  type="radio" id="{{ $cardNumber }}" value="" name="preset[{{$cardNumber}}]" />

【讨论】：