Как написать условие в jQuery

Question

Если чекбокс отмечен, то нужно добавлять класс оверфлоу хидден, иначе удалять класс.

Answer 1

Можно обойтись вообще без условий:

$(".cb:checked").addClass("active");   // И так возьмет только отмеченные.

$(".cb").on("change", function() {
  $(this).toggleClass("active");       // При изменении состояния - переключить класс
});

.active {
  box-shadow: 0 0 0 5px orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="cb">
<input type="checkbox" class="cb">
<input type="checkbox" class="cb" checked>
<input type="checkbox" class="cb">

А условие выглядело бы так:

$(".cb").on("change", function() {
  if ( $(this).prop("checked") ) {
    // Значение свойства и так true или false, нет смысла писать == true
    $(this).addClass("active");
  } else {
    $(this).removeClass("active");
  }
});

или так:

$(".cb").on("change", function() {
  let isChecked = $(this).prop("checked");
  $(this)[ isChecked ? "addClass" : "removeClass" ]("active");
  // Google → Тернарный оператор; JS объекты скобочная нотация
});

Answer 2

Это достаточно легко сделать привязавшись к какому либо событию, например, click'у, тогда можно добавлять или удалять у целевого элемента свойства (используя css()) или классы (используя addClass() или removeClass()) в зависимости от того "отмечен" ли он:

$("input").on("click", function () { 
  const $p = $("p")
  if ($(this).is(":checked")) {
    $(this).css("overflow", "hidden")
    $p.show()
  } else {
    $(this).css("overflow", "")
    $p.hide()
  }
})

p {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />
<p>свойство overflow добавлено</p>

БЛОГ НА HUSL

Как написать условие в jQuery

Ответы (2 шт):