向复选框添加 JS 函数，如果 TRUE 则提示新的 HTML 元素

Question

我正在为自己的实践开发一些网页示例，并希望此表单包含一个 JS 函数，当选中“X”时提示“纠正操作”区域。请参阅下面的代码和 CSS。

function checkMe() {
  var cb = document.getElementById("registration-danger");
  var ca = document.getElementById("correctiveAction");
  if (cb.checked == true) {
    ca.style.display = "block";
    console.log('true');
  } else {
    ca.style.display = "none";
    console.log('false');
  }
}

<!--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" 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 onclick="checkMe()" type="radio" class="btn-check" 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" 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>

我尝试使用这个JS函数。当选中按钮时它会起作用，我已经在控制台中确认了这一点。但是，当未单击或未单击按钮时，它不会记录“false”。

Answer 1

单击任一单选按钮时需要调用该函数，因此当您通过单击另一个按钮取消选择该选项时它将运行。因此，将相同的

onclick

添加到另一个按钮。

function checkMe() {
  var cb = document.getElementById("registration-danger");
  var ca = document.getElementById("correctiveAction");
  if (cb.checked == true) {
    ca.style.display = "block";
    console.log('true');
  } else {
    ca.style.display = "none";
    console.log('false');
  }
}

<!--Registration Line-->
<div class="accordion-body vehicleBody border border-light-subtle">

  <h3 id="registration" class="mx-3">Current / Valid Vehicle Registration
    <span>
        <input onclick="checkMe()" type="radio" class="btn-check" 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 onclick="checkMe()" type="radio" class="btn-check" 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" 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>