Почему не срабатывает событие изменения флажка?

У меня есть две функции.

Первая функция преобразует div-щелчок в переключатель checked/unchecked. Вторая функция преобразует изменение флажка в событие hide/show.

Проблема в том, что, когда я использую первую функцию для проверки/снятия флажка, вторая функция не вызывается. Я новичок в javascript, спасибо.

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").parent().click(function(evt) {
        if (evt.target.type !== 'checkbox') {
            var $checkbox = $(":checkbox", this);
            $checkbox.attr('checked', !$checkbox.attr('checked'));
            evt.stopPropagation();
            return false;
        }
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").change(function() {
        if($(this).attr("checked")) {
            $('.'+this.id).show();
        }
        else {
            $('.'+this.id).hide();
        }
    });
});
</script>

Ответ 1

Событие change не срабатывает при программном изменении значения флажка. Что вы можете сделать, чтобы обеспечить его срабатывание:

 $(":checkbox").parent().click(function(evt) {
    if (evt.target.type !== 'checkbox') {
        var $checkbox = $(":checkbox", this);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.change();
    }
});

Ответ 2

Не утруждайте себя первым фрагментом. Просто используйте элементы LABEL:

<label><input type="checkbox">Some option</label>

Теперь, когда пользователь нажимает метку (текст рядом с флажком), этот флажок будет активирован.

Второй фрагмент можно оптимизировать:

$('input:checkbox').change(function() {
    $('#' + this.id).toggle(this.checked);
});

Ответ 3

вы используете '.', который для селекторов классов используйте '#', поскольку вы используете идентификатор элемента. Вот так:

$(document).ready(function() {
    $(":checkbox").bind('change', function() {
        if($(this).attr("checked")) {
            $('#'+this.id).show();
        }
        else {
            $('#'+this.id).hide();
        }
    });
});