jQuery: событие изменения состояния чекбокса (checked state)

Вот еще одно решение на jQuery для отслеживания изменения состояния чекбокса:

$('.checkbox_class').on('change', function() { // при изменении состояния
   if (this.checked) { // если состояние "CHECKED"
        // здесь выполняйте вашу логику
    }
});

В этом коде мы используем метод on() для добавления обработчика события change к элементам с классом checkbox_class. Когда чекбокс изменяет свое состояние на "выбран", выполняется код внутри блока if. Вы можете добавить любую необходимую логику в этот блок.

Если ваша цель — прикрепить событие только к отмеченным чекбоксам (чтобы оно срабатывало, когда они будут сняты и снова отмечены), то вам нужно использовать следующий код:

$(function() {
    $("input[type='checkbox']:checked").change(function() {
        // ваш код здесь
    });
});

Если же вы хотите прикрепить событие ко всем чекбоксам (как отмеченным, так и неотмеченным), то вам подойдет следующий вариант:

$(function() {
    $("input[type='checkbox']").change(function() {
        // ваш код здесь
    });
});

Если же вам необходимо, чтобы событие срабатывало только при установке отметки (то есть, когда чекбокс становится отмеченным из неотмеченного состояния), то следует обратиться к ответу @James Allardice выше.

Кстати, input[type='checkbox']:checked — это CSS-селектор.

Это очень просто, вот как я это делаю:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Выбранный или текущий чекбокс
        value = checkbox.val(); // Значение чекбокса

    if (checkbox.is(':checked')) {
        console.log('выбран');
    } else {
        console.log('не выбран');
    }
});

С уважением!

В вашем коде используется jQuery для установки обработчика события change на элемент input с идентификатором chkproperty. При изменении значения этого элемента будет отображаться окно с его текуще значением.

Вот что делает каждая часть:

1. $(document).ready(function () { ... }); — это гарантирует, что код внутри будет выполнен только после полной загрузки DOM-дерева. Это помогает избежать ошибок, связанных с попыткой обращения к элементам, которые еще не существуют на странице.

2. $(document).on('change', 'input[Id="chkproperty"]', function (e) { ... }); — этот код устанавливает делегированный обработчик события change для всех элементов input с атрибутом Id, равным chkproperty. Это означает, что обработчик будет работать для всех таких элементов, даже если они добавлены на страницу динамически после первоначальной загрузки.

3. alert($(this).val()); — внутри функции обработчика события change используется $(this).val() для получения текущего значения изменяющегося элемента input, после чего оно отображается в виде всплывающего окна.

Если у вас есть дополнительные вопросы или если что-то не работает как ожидалось, не стесняйтесь спрашивать!

Это можно сделать следующим образом. При нажатии на чекбокс элемент с идентификатором #checkbox будет скрыт или, наоборот, показан.

<script>
    $('#checkbox').on('click', function() {
        if (this.checked) {
            $('#checkbox').hide();
        } else {
            $('#checkbox').show();
        }
    });
</script>

Таким образом, если чекбокс отмечен, элемент с идентификатором #checkbox будет скрыт; если он не отмечен, элемент будет показан.