Laravel Blade中单选按钮联动表单脚本实现报错求助

错误原因分析 #

你的代码存在两个关键问题导致报错：

• 脚本中错误混用了Blade语法@checked(true)，原生JavaScript里单选按钮的选中状态是通过DOM元素的checked布尔属性判断的，不需要加@也无需调用方法。
• 仅「Swimmer」单选按钮绑定了点击事件，切换其他选项时无法触发状态更新。

修正后的完整代码 #

HTML部分

<input type="radio" id="Swimmer" name="userType" value="swimmer" onchange="toggleUserOptions()">
<label for="Swimmer">Swimmer</label><br>
<input type="radio" id="Coach" name="userType" value="coach" onchange="toggleUserOptions()">
<label for="Coach">Coach</label><br>
<input type="radio" id="Admin" name="userType" value="admin" onchange="toggleUserOptions()">
<label for="Admin">Admin</label><br>

<div id="fedNumber" style="display: none;">
<x-label for="federation_number" value="{{ __('Fed Numb') }}" />
<x-input id="federation_number" class="block mt-1 w-full" type="text" name="federation_number" :value="old('federation_number')" autofocus autocomplete="name" />
</div>

脚本部分

@push('script')
<script>
console.log('hello');
function toggleUserOptions() {
    const swimmerRadio = document.getElementById('Swimmer');
    const fedNumberDiv = document.getElementById('fedNumber');
    
    // 根据Swimmer单选按钮的选中状态切换显示
    if (swimmerRadio.checked) {
        console.log('Swimmer checked');
        fedNumberDiv.style.display = 'block';
    } else {
        console.log('Swimmer not checked');
        fedNumberDiv.style.display = 'none';
    }
}
</script>
@endpush

关键修改说明 #

1. 修正状态判断逻辑：将错误的document.getElementById('Swimmer').@checked(true)替换为swimmerRadio.checked，直接读取DOM元素的布尔属性判断选中状态。
2. 统一事件绑定：给所有单选按钮添加onchange事件，调用同一个通用函数toggleUserOptions，确保切换任何选项都能触发表单区域的显示/隐藏。
3. 实现动态显示逻辑：在函数中获取fedNumber容器，根据Swimmer的选中状态设置display样式，完成需求的动态显示功能。

内容的提问来源于stack exchange，提问作者Seppe Van Eynde