Laravel循环模态框中用jQuery获取单选按钮值异常问题

问题原因 #

你通过@foreach循环生成多个模态框时，给每个模态框内的单选按钮都用了相同的name="acceptTechnical"——这会导致所有单选按钮属于同一个单选组：选中其中一个时，其他同name的单选按钮会自动取消选中，同时jQuery的事件绑定逻辑无法区分触发事件的是哪个模态框内的按钮，最终只会拿到第一个匹配元素的值。

解决方案 #

1. 给每个模态框的单选按钮设置唯一name #

在Blade模板里，利用循环项$row的唯一标识（比如id）给单选按钮的name加后缀，确保每个模态框内的单选按钮组是独立的：

<div class="row">
    @foreach($service as $row)
        @if($row->full_name != "")
            <!-- 候选人卡片 -->
            <div class="candidate-card">
                <!-- 卡片内容 -->
                <button type="button" data-bs-toggle="modal" data-bs-target="#modal-{{ $row->id }}">查看详情</button>
            </div>

            <!-- 对应模态框 -->
            <div class="modal fade" id="modal-{{ $row->id }}" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <!-- 单选按钮组：name添加row的id作为唯一标识 -->
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="acceptTechnical-{{ $row->id }}" value="{{ $row->id }}" id="tech-yes-{{ $row->id }}">
                                <label class="form-check-label" for="tech-yes-{{ $row->id }}">同意技术考核</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="acceptTechnical-{{ $row->id }}" value="0" id="tech-no-{{ $row->id }}">
                                <label class="form-check-label" for="tech-no-{{ $row->id }}">拒绝技术考核</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endforeach
</div>

2. 修改jQuery事件绑定逻辑 #

用事件委托绑定到父元素（比如.row），这样能动态监听所有循环生成的单选按钮的change事件，同时通过$(this)精准获取当前触发事件的按钮值：

$(document).ready(function() {
    // 初始化所有单选按钮为未选中状态
    $('input[type=radio][name^="acceptTechnical-"]').prop('checked', false);

    // 事件委托绑定change事件
    $('.row').on('change', 'input[type=radio][name^="acceptTechnical-"]', function() {
        const id = $(this).val();
        // 可根据需求过滤无效值（比如0）
        if (id !== '0') {
            axios.get('/employer/get-user-tech-skills?id=' + id)
            .then(res => {
                // 请求成功后的处理逻辑
                console.log(res.data);
            })
            .catch(err => {
                // 请求失败后的处理逻辑
                console.error(err);
            });
        }
    });
});

补充说明 #

• name^="acceptTechnical-"是属性选择器，匹配所有name以acceptTechnical-开头的单选按钮，确保能覆盖所有循环生成的按钮。
• 事件委托的好处是：即使后续异步加载新的候选人卡片和模态框，事件依然能生效，无需重新绑定。
• 模态框的id也加上$row->id，避免多个模态框id重复导致无法正常打开。

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