JQuery - событие checkbox on-change не срабатывает, если отмечено с помощью JQuery

У меня есть эта функция Check All, которая проверяет все флажки. Я использую JQuery для этого.

Но у меня также есть эта функция on change, которая переключает класс в оболочку div:

$('input[type="checkbox"]').on('change', function(){
    $(this).closest('div').toggleClass('highlight');
});

Эта функция запускается, когда я нажимаю флажок, но не, если я нажимаю Check All.

Есть ли способ вручную запустить событие с помощью JQuery? Или есть лучшее решение?

Спасибо

EDIT:

Здесь упрощенный HTML:

<a id="check_all">Check All</a>
<div>
    <input type="checkbox" name="cb" value="abc">ABC<br>
</div>
<div>
    <input type="checkbox" name="cb" value="pqr">PQR<br>
</div>
<div>
    <input type="checkbox" name="cb" value="xyz">XYZ<br>
</div>

Здесь JSFiddle

http://jsfiddle.net/DarcFiddle/d4VTh/

Ответ 1

После клика проверьте все, что вы должны вызвать событие change(), подобное этому

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").prop('checked', true).change();
    });
});

Ответ 2

Это вызовет событие change, но только после его первой привязки.

$('input[type="checkbox]').trigger('change');

Ответ 3

Вы можете попробовать это,

$(document).on('change','input[type="checkbox]' ,function(){
     // $this will contain a reference to the checkbox
      var $this = $(this);   
    if ($this.is(':checked')){//To CHECK CHECK BOX IS CHECKED OR NOT
         $(this).closest('div').toggleClass('highlight');
    }
});

Надеюсь, что это поможет,

Ответ 4

Почти идентичный visnu-ответ, но при прямом вызове click() будут запускаться все события click, связанные jQuery. Если вы продемонстрируете это, вы увидите, что оно также отменяет флажки, тогда как его ответ просто удаляет выделение, пока они остаются нажатыми.

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").click();
    });
});

Ответ 5

Проверьте эту модификацию скрипта вашего кода: http://jsfiddle.net/d4VTh/51/

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        if (this.checked)
            $(this).closest('div').addClass('highlight');
        else 
            $(this).closest('div').removeClass('highlight');
    });

    $("#check_all").on('click', function(){
        var item = $("input[type='checkbox']")
        item.prop('checked', !item.prop('checked')).change();
    });
});