如何为同ID多元素绑定事件监听，仅在点击元素父容器触发

第一步：修复HTML重复ID问题 #

HTML中ID必须唯一，先把所有重复ID替换为类名，同时给需要关联的元素设置唯一ID：

<!--Registration Line-->
<div class="accordion-body vehicleBody border border-light-subtle">
    <h3 id="registration" class="mx-3">Current / Valid Vehicle Registration
        <span>
        <input type="radio" class="btn-check reg success-radio" name="registration" id="registration-success" autocomplete="off" >
        <label class="btn btn-outline-success rounded-circle" for="registration-success"><i class="fa-solid fa-check"></i></label>
        <input  type="radio" class="btn-check danger-radio" name="registration" id="registration-danger" autocomplete="off" />
        <label class="btn btn-outline-danger rounded-circle ms-3" for="registration-danger"><i class="fa-solid fa-x"></i></label>
        </span>
    </h3>
    <div class="ms-3 corrective-action-container" style="display:none;">
        <p class="text-center" style="font-weight: 400; padding: 10px; color: crimson; text-decoration: underline;">Corrective Action Required!</p>
        <div class="form-floating correctiveAction" >
            <textarea class="form-control" id="registration-textarea" style="height: 100px"></textarea>
            <label for="registration-textarea">Please determine appropriate corrective action.</label>
        </div>
        <div class="input-group mt-2 ">
            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
            <span class="input-group-text infoHead" style="width:174px;">Responsible Person:</span>
            <input type="text" class="form-control" aria-label="employee name" aria-describedby="employee name">
        </div>
    </div>
</div>
<!--Insurance Line-->
<div class="accordion-body vehicleBody border border-light-subtle">
    <h3 id="insurance" class="mx-3">Current / Valid Insurance
        <span>
        <input type="radio" class="btn-check success-radio" name="insurance" id="insurance-success" autocomplete="off">
        <label class="btn btn-outline-success rounded-circle" for="insurance-success"><i class="fa-solid fa-check"></i></label>
        <input type="radio" class="btn-check danger-radio" name="insurance" id="insurance-danger" autocomplete="off">
        <label class="btn btn-outline-danger rounded-circle ms-3" for="insurance-danger"><i class="fa-solid fa-x"></i></label>
        </span>
    </h3>
    <div class="ms-3 corrective-action-container" style="display:none;">
        <p class="text-center" style="font-weight: 400; padding: 10px; color: crimson; text-decoration: underline;">Corrective Action Required!</p>
        <div class="form-floating correctiveAction" >
            <textarea class="form-control" id="insurance-textarea" style="height: 100px"></textarea>
            <label for="insurance-textarea">Please determine appropriate corrective action.</label>
        </div>
        <div class="input-group mt-2 ">
            <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
            <span class="input-group-text infoHead" style="width:174px;">Responsible Person:</span>
            <input type="text" class="form-control" aria-label="employee name" aria-describedby="employee name">
        </div>
    </div>
</div>

第二步：编写通用JS逻辑 #

采用事件委托方式，只需绑定一次事件即可复用所有检查项：

// 监听全局点击事件，利用事件冒泡处理所有单选框
document.addEventListener('click', function(e) {
    // 找到触发事件的单选框元素
    const targetRadio = e.target.closest('.btn-check');
    if (!targetRadio) return;

    // 定位当前单选框所在的检查项容器
    const container = targetRadio.closest('.vehicleBody');
    const correctiveArea = container.querySelector('.corrective-action-container');

    // 根据单选框类名控制显示/隐藏
    if (targetRadio.classList.contains('success-radio')) {
        correctiveArea.style.display = 'none';
    } else if (targetRadio.classList.contains('danger-radio')) {
        correctiveArea.style.display = 'block';
    }
});

关键说明 #

1. 重复ID是问题根源：getElementById只会返回第一个匹配元素，导致所有操作都作用在第一个检查项上，替换为类名+唯一ID可解决此问题。
2. 事件委托优势：无需为每个检查项单独绑定事件，后续新增检查项无需修改JS代码，自动生效。
3. 容器定位：通过closest('.vehicleBody')精准找到当前操作的检查项容器，确保纠正动作只影响当前section。

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