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

Question

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

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

Проблема в том, что когда я использую первую функцию, чтобы установить / снять флажок, вторая функция не вызывается. Я новичок в 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>

Answer 1

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

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

Answer 2

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

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

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

---

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

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

Answer 3

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

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