如何将事件侦听器应用于共享 ID 的多个元素，但仅在被单击元素的父元素上触发

Question

我正在尝试开发一个检查表，当选择“X”单选而不是“复选标记”单选时，会触发“纠正措施”提示。

我在两个按钮上使用了事件侦听器，以便在必要时触发提示。

我想要完成的是在多个 DIV 上使用此函数，而不是为每个部分编写特定的事件侦听器（这将导致大量代码，因为我打算在检查表上有很多点）。我希望有一种方法可以共享所有部分的 ID，并将事件侦听器附加到所有 ID，但仅在选择无线电的父 DIV 中触发“纠正操作”提示。 （我希望这是有道理的）。

注意 注册行的输入与保险行中的输入共享相同的 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" name="registration" id="success" autocomplete="off" >
        <label class="btn btn-outline-success rounded-circle" for="success"><i class="fa-solid fa-check"></i></label>
        <input  type="radio" class="btn-check" name="registration" id="danger" autocomplete="off" />
        <label class="btn btn-outline-danger rounded-circle ms-3" for="danger"><i class="fa-solid fa-x"></i></label>
        </span>
    </h3>
    <div class="ms-3" id="correctiveAction">
        <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="floatingTextarea2" style="height: 100px"></textarea>
            <label for="floatingTextarea2">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" name="insurance" id="success" autocomplete="off">
        <label class="btn btn-outline-success rounded-circle" for="success"><i class="fa-solid fa-check"></i></label>
        <input type="radio" class="btn-check" name="insurance" id="danger" autocomplete="off">
        <label class="btn btn-outline-danger rounded-circle ms-3" for="danger"><i class="fa-solid fa-x"></i></label>
        </span>
    </h3>
    <div class="ms-3" id="correctiveAction">
        <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="floatingTextarea2" style="height: 100px"></textarea>
            <label for="floatingTextarea2">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

const ca = document.getElementById("success");
const nc = document.getElementById("danger")
var ca1 = document.getElementById("correctiveAction");
nc.addEventListener("click", function(){
   ca1.style.display="block";
})
ca.addEventListener("click", function(){
    ca1.style.display="none"
})

我试图找到定位输入并仅在父 div 内触发的方法，但我没有找到这样做的方法。

使用 JS，我只在注册 div 上触发“纠正操作”，即使单击保险 div 的“X”也是如此。

Answer 1

因此您想使用单选按钮打开或关闭“ CorrectiveAction”。首先，尽可能多地删除 id——就像评论的那样，它们必须是唯一的，并且在很大程度上您不需要以表单形式使用它们。不要使用 ids，而是使用 name 属性。

我想，“ CorrectiveAction”部分只有在“on”状态下才应该成为提交数据的一部分。因此我建议您使用 fieldset 元素。当您将禁用属性设置为

true

时，将不包含该字段集中的字段元素。然后你可以使用CSS的disabled属性来隐藏字段集。

为更改事件创建事件监听器，而不是单击事件。然后您可以使用 name 属性来确定应该发生什么。在这种特定情况下，您可以为两个单选按钮指定值 1 和 0，然后将字段集的禁用属性设置为单选按钮生成的布尔值。

document.forms.form01.addEventListener('change', e => {
  let form = e.target.form;
  switch(e.target.name){
    case 'registration':
    case 'insurance':
      form[`correctiveAction_${e.target.name}`].disabled = !!parseInt(e.target.value);
      break;
  }
});

fieldset {
  border: none;
}

fieldset:disabled {
  display: none;
}

i.fa-check:before {
  font-style: normal;
  content: "✅";
}

i.fa-x:before {
  font-style: normal;
  content: "❎";
}

<form name="form01">
  <div class="accordion-body vehicleBody border border-light-subtle">
    <h3 id="registration" class="mx-3">Current / Valid Vehicle Registration
      <span>
      <label class="btn btn-outline-success rounded-circle">
        <input type="radio" class="btn-check reg" name="registration" value="1" autocomplete="off" checked>
        <i class="fa-solid fa-check"></i>
      </label>
      <label class="btn btn-outline-danger rounded-circle ms-3">
        <input type="radio" class="btn-check" name="registration" value="0" autocomplete="off" />
        <i class="fa-solid fa-x"></i>
      </label>
    </span>
    </h3>
    <fieldset class="ms-3" id="correctiveAction_registration" disabled="true">
      <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="floatingTextarea2" style="height: 100px"></textarea>
        <label for="floatingTextarea2">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>
    </fieldset>
  </div>
  <!--Insurance Line-->
  <div class="accordion-body vehicleBody border border-light-subtle">
    <h3 id="insurance" class="mx-3">Current / Valid Insurance
      <span>
        <label class="btn btn-outline-success rounded-circle">
          <input type="radio" class="btn-check" name="insurance" value="1" autocomplete="off">
          <i class="fa-solid fa-check"></i>
        </label>
        <label class="btn btn-outline-danger rounded-circle ms-3">
          <input type="radio" class="btn-check" name="insurance" value="0" autocomplete="off" checked>
          <i class="fa-solid fa-x"></i>
        </label>
      </span>
    </h3>
    <fieldset class="ms-3" name="correctiveAction_insurance">
      <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="floatingTextarea2" style="height: 100px"></textarea>
        <label for="floatingTextarea2">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>
    </fieldset>
  </div>
</form>