时间戳

首页 > 解决方案 > 复选框 - 在继续之前必须选中一个

javascript - 复选框 - 在继续之前必须选中一个

问题描述

我有一个带有许多不同选项卡的向导公式。其中之一包括 10 个复选框，并且在继续表单之前应至少需要/选中其中一个。所以我得到了这个html代码：

<div class="row form-group" id="tab_UN_Ziele">
  <div class="col checkboxgroup"> <input type="checkbox" value="material"  name="project_need" class="check_UN_Ziel form-check-input" onclick="//checkboxChecked()"> <label for="project_need_material_1"> <div class=" card border-0"> <img class="icon-image checkbox_images" src="SDGIcons/01.png" style="width:150px; border-radius: 10px;" /></div></label></div>
  ... this div 10 times
</div>

我得到了下一个和上一个按钮来转到下一个选项卡。

<button type="button" id="prevBtn" onclick="nextPrev(-1)">Zurück</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>

JS 代码来自 w3school，可以在这里找到。现在，我在选中无复选框时发出了一个警报的功能：

let errorMessage = (tab_indicator, alert_text) => {
  if (currentTab == tab_indicator) {
    $(document).ready(function () {
      $('#nextBtn').click(function () {
        checked = $("input[type=checkbox]:checked").length;

        if (!checked) {
          alert(alert_text);
          return curretTab(2);
        }
      });
    });
  }
}

我在function nextPrev(n). 因此，如果我单击下一个按钮，它会发出警报，但会打开下一个选项卡。如何阻止下一个选项卡显示？这里的例子。

标签： javascripthtmlcss

解决方案

这是您的两个问题的答案

您永远不应该在可能多次调用的函数中添加事件处理程序。

window.addEventListener("load", () => {
  document.getElementById("tab_UN_Ziele").addEventListener("click", e => {
    const tgt = e.target;
    if (tgt.classList.contains("check_UN_Ziel")) {
      tgt.closest(".checkboxgroup").querySelector(".card").style.border = tgt.checked ? '5px solid red' : "none"
    }
  })
})

currentTab = 2

let errorMessage = (tab_indicator, alert_text) => {
  if (currentTab == tab_indicator) {
    const checked = $("input[type=checkbox]:checked").length>0;
    if (!checked) {
      alert(alert_text);
      return false; // error found
    }
  }
  console.log("ok")
  return true;
};

function nextPrev(n) {
  if (!errorMessage(2,"Bitte wählen sie mindestens ein UN-Ziel aus.")) {
    console.log("error");
    // showTab(currentTab); 
  }
}  
.card {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form-group" id="tab_UN_Ziele">
  <div class="col checkboxgroup">
    <input type="checkbox" value="material" name="project_need" class="check_UN_Ziel form-check-input">
    <label for="project_need_material_1">
    <div class="card border-0">
      <img class="icon-image checkbox_images" src="SDGIcons/01.png" style="width:150px; border-radius: 10px;" />
    </div>
    </label>
  </div>
  <div class="col checkboxgroup">
    <input type="checkbox" value="material" name="project_need" class="check_UN_Ziel form-check-input">
    <label for="project_need_material_1">
    <div class="card border-0">
      <img class="icon-image checkbox_images" src="SDGIcons/01.png" style="width:150px; border-radius: 10px;" />
    </div>
    </label>
  </div>
  <div class="col checkboxgroup">
    <input type="checkbox" value="material" name="project_need" class="check_UN_Ziel form-check-input">
    <label for="project_need_material_1">
    <div class="card border-0">
      <img class="icon-image checkbox_images" src="SDGIcons/01.png" style="width:150px; border-radius: 10px;" />
    </div>
    </label>
  </div>
</div>
<button type="button" onclick="nextPrev()">Test code</button>

推荐阅读