Определить состояние чекбокса

267

20 февраля 2018, 08:22

Есть кастомный чекбокс на сайте, по клику на который необходимо узнать активный он или нет. Пишу следующие:

$(document).on("click", ".style-checkbox", function() { 
  console.log($(this).find("input").is(":checked")); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label class="style-checkbox"> 
        <input class="style-checkbox__input" type="checkbox" name="basket-additional"> 
        <span class="style-checkbox__newcheck" type="checkbox" name="basket-additional"></span> 
        <div class="style-checkbox__name">Какой-то текст</div> 
    </label>

В результате данного выполнения скрипта в консоле я получаю одновременно false и true, если элемент не активен изначально и наоборот true и false если был изначально активен. Из-за чего появляется этот задубленный вариант, как исправить?

Answer 1

Вместо обработки клика обрабатывайте изменение состояния инпута, ваша ошибка проявляется из-за очередности вызова событий при клике по тексту.

$(document).on("change", ".style-checkbox__input", function() { 
  console.log($(this).is(":checked")); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label class="style-checkbox"> 
        <input class="style-checkbox__input" type="checkbox" name="basket-additional"> 
        <span class="style-checkbox__newcheck" type="checkbox" name="basket-additional"></span> 
        <div class="style-checkbox__name">Какой-то текст</div> 
    </label>