如何在forelse循环中根据单选按钮选择显示/隐藏对应div

问题场景 #

在Laravel的forelse循环中为每位参会人员生成「HADIR（出席）」和「TIDAK HADIR（不出席）」单选按钮，需求是选择「不出席」时显示对应备注Div，选择「出席」时隐藏该Div。但目前仅第一个参会人员的功能正常，后续人员的单选按钮无法控制对应Div的状态。

问题根源 #

• 重复ID冲突：循环中所有单选按钮和Div都使用了固定ID（radioYes、radioNo、myDIV），而HTML中ID必须唯一，document.getElementById只会获取到页面中第一个匹配的元素，导致后续元素无法被脚本识别。
• 脚本绑定单一元素：外部脚本仅绑定了第一个元素的引用，所有操作都只会作用在第一个参会人员的Div上。

解决方案 #

1. 修改Laravel循环内的HTML代码 #

为每个循环生成的元素添加唯一ID（基于循环计数器$counter），并在点击事件中传递该计数器：

@forelse($ahli_mesyuarat as $counter => $ahli)
    <?php $counter++; ?>
    <!-- 注意：form不应嵌套在<tr>内，建议将form移至<table>外层或调整结构 -->
    <tr>
        <td>{{ $counter }}</td>
        <td align="center"><strong>({{$ahli->nama_ahli}})</strong><br>{{$ahli->Jawatan->nama_jawatan}}</td>
        <td align="center">{{$ahli->Gred->nama_gred}} <br> {{ date('d/m/Y', strtotime($ahli->tarikh_lantikan)) }}</td>

        <td><strong>
            <div class="form-group" align="center">
                <label class="col-form-label" for="hadir_{{ $counter }}">HADIR</label>
                <input style="width:9%;" type="radio" id="radioYes_{{ $counter }}" name="kehadiran[{{$counter}}]" value="Y" onClick="hideInputDiv({{ $counter }})" checked>
                                
                <label class="col-form-label" for="tidakHadir_{{ $counter }}">TIDAK HADIR</label>
                <input style="width:9%;" type="radio" id="radioNo_{{ $counter }}" name="kehadiran[{{$counter}}]" value="N" onchange="addmentor({{ $counter }})">
            </div> 

            <!-- 带唯一ID的备注Div -->
            <div id="myDIV_{{ $counter }}" style="display: none;">
                CATATAN(JIKA TIDAK HADIR):
                <textarea class="form-control" name="catatan[{{$counter}}]" cols="5" rows="5" placeholder=""></textarea><br>

                NAMA WAKIL
                <input class="form-control" type="text" name="wakil_oleh[{{$counter}}]" placeholder="NAMA PENUH WAKIL" value=""><br>

                JAWATAN WAKIL
                <select class="form-control" name="jawatan[{{$counter}}]" id="jawatan_{{ $counter }}">
                    <option label="PILIH JAWATAN WAKIL"></option>
                    <optgroup label="____________________________________________________________________">
                        @foreach ($ref_jawatan as $jawatan)
                            <option value="{{ $jawatan->id_jawatan }}">{{ $jawatan->nama_jawatan }}</option>
                        @endforeach
                    </optgroup>
                </select><br>

                GRED WAKIL
                <select class="form-control" name="id_gred[{{$counter}}]" id="id_gred_{{ $counter }}">
                    <optgroup label="PILIH GRED AHLI">
                        <option label="PILIH GRED AHLI MESYUARAT"></option>
                        <optgroup label="____________________________________________________________________">
                            @foreach ($kekananan_gred as $gred)
                                <option value="{{ $gred->id_gred }}">{{ $gred->nama_gred }}</option>
                            @endforeach
                        </optgroup>
                    </optgroup>
                </select>
            </div>
        </strong></td>
    </tr>
@empty
    <tr><td colspan="4">Tiada ahli mesyuarat dijumpai.</td></tr>
@endforelse

2. 修改外部脚本 #

将脚本改为接收计数器参数，通过参数拼接唯一ID来获取对应元素，实现精准控制：

<script>
    // 显示备注Div
    function addmentor(counter) {
        const radioNo = document.getElementById(`radioNo_${counter}`);
        const inputDiv = document.getElementById(`myDIV_${counter}`);
        if (radioNo.checked) {
            inputDiv.style.display = "block";
        }
    }

    // 隐藏备注Div
    function hideInputDiv(counter) {
        const inputDiv = document.getElementById(`myDIV_${counter}`);
        inputDiv.style.display = "none";
    }
</script>

额外优化提示 #

• 原代码中form标签嵌套在<tr>内不符合HTML规范，建议将form移至<table>外层，避免布局问题。
• 循环内的下拉框ID（jawatan、id_gred）也存在重复问题，已在上述代码中添加$counter后缀修正，确保表单提交时参数能正确对应到每个参会人员。

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