在隐藏复选框上添加更改事件

Add change event on hidden checkbox

本文关键字：事件 添加 隐藏 复选框      更新时间：2023-09-26

我正在尝试捕获更改事件，或者至少单击复选框上的事件。我读到当"visibility : hidden"或"display:none"时，事件不会被触发。然后我将eventListener添加到标签中，但它似乎也不起作用。我不明白如何使工作。

document.addEventListener("DOMContentLoaded", function() {
  var gameCount = document.getElementsByClassName("innerCount")[0];
  var checkLabel = document.querySelector("input[type=checkbox] + label");
  checkLabel.addEventListener("onclick", function() {
    if (checkLabel.checked) {
      gameCount.innerHTML = "--";
      console.log("turnOn");
    } else {
      gameCount.innerHTML = "";
      console.log("turnOff");
    }
  })
});
.checkbox > input[type=checkbox] {
  visibility: hidden;
}
.checkbox {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 30px;
  border: 2px solid #424242;
}
.checkbox > label {
  position: absolute;
  width: 30px;
  height: 26px;
  background-color: #a50005;
  cursor: pointer;
}
.checkbox > input[type=checkbox]:checked + label {
  right: 28px;
}
<div id="switcher">
  <span class="labels">ON</span>
  <div class="checkbox">
    <input id="checkMe" type="checkbox">
    <label for="checkMe"></label>
  </div>
  <span class="labels">OFF</span>
</div>

这是因为addEventListener onClick不存在。请试试click:

document.addEventListener("DOMContentLoaded", function() {
  var gameCount = document.getElementsByClassName("innerCount")[0];
  var checkLabel = document.querySelector("input[type=checkbox] + label");
  checkLabel.addEventListener("click", function() {
    if (checkLabel.checked) {
      console.log("turnOn");
    } else {
      console.log("turnOff");
    }
  })
});
.checkbox > input[type=checkbox] {
  visibility: hidden;
}
.checkbox {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 30px;
  border: 2px solid #424242;
}
.checkbox > label {
  position: absolute;
  width: 30px;
  height: 26px;
  background-color: #a50005;
  cursor: pointer;
}
.checkbox > input[type=checkbox]:checked + label {
  right: 28px;
}
<div id="switcher">
  <span class="labels">ON</span>
  <div class="checkbox">
    <input id="checkMe" type="checkbox">
    <label for="checkMe"></label>
  </div>
  <span class="labels">OFF</span>
</div>

为复选框字段使用change事件监听器

document.addEventListener("DOMContentLoaded", function() {
  var gameCount = document.getElementsByClassName("innerCount")[0];
  var checkLabel = document.querySelector("input[type=checkbox]");
  checkLabel.addEventListener("change", function() {
    if (checkLabel.checked) {
      gameCount.innerHTML = "--";
      console.log("turnOn");
    } else {
      gameCount.innerHTML = "";
      console.log("turnOff");
    }
  })
});
相关文章：