JQuery Checkbox двойного действия в функции

Question

Мне было трудно создать многофункциональный флажок, я хочу, чтобы когда пользователь проверял его, отображение элемента div превращалось из ничего в блокировку, а когда пользователь снимал флажок, оно становилось равным none.

я пытался создать двойное условие,

$("#customCheck1").on("change", function() {
  if ($(this).is(":checked") || document.getElementById("Reload").style.display = "none") {
    $('#lblauto').text("Auto Reload ON")
    document.getElementById("Reload").style.display = "block";
  } else {
    $('#lblauto').text("Auto Reload OFF")
    document.getElementById("Reload").style.display = "none";
  }
})

, но оно не работает.

вот коды, которые я должен использовать:

Html (флажок):

<div class="custom-control custom-checkbox" id="checkasd">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1" id="lblauto"><span>Auto Reload OFF<span></label>
</div>

JQuery:

$("#customCheck1").on("change", function() {
  if ($(this).is(":checked")) {
    $('#lblauto').text("Auto Reload ON")
    document.getElementById("Reload").style.display = "block";
  } else {
    $('#lblauto').text("Auto Reload OFF")
  }
})

я использую начальную загрузку v4.3.1

Answer 1

Существует проблема с этой строкой if ($(this).is(":checked") || document.getElementById("Reload").style.display = "none"), где сингл = должен быть ===

Метод $ (). On также может использовать событие в обратном вызове, поэтому вам не нужно снова обращаться к DOM

$("#customCheck1").on("change", function(e) {
  var isChecked = e.target.checked;
  if (isChecked) {
    $('#lblauto').text("Auto Reload ON");
    $("Reload").css('display', 'block');
  } else {
    $('#lblauto').text("Auto Reload OFF");
    $("Reload").css('display', 'none');
  }
})

Answer 2

Вы можете использовать jquery toggle.Создайте класс и сначала скройте Reload div.Затем используйте toggle, чтобы скрыть / показать

$("#customCheck1").on("change", function() {
  if ($(this).is(":checked")) {
    $('#lblauto').text("Auto Reload ON")

  } else {
    $('#lblauto').text("Auto Reload OFF")
  }
  $("#Reload").toggle('display')
})

.display {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox" id="checkasd">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1" id="lblauto"><span>Auto Reload OFF</span></label>
</div>

<div id='Reload' class='display'>Reload Div</div>