Событие смены флажка не срабатывает

Это мой код:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.chk').live('change', function() {
      alert('change event fired');
    });
    $('a').click(function() {
      $('.chk').attr('checked', true);
    });
  });
</script>
</head>
<body>
<div class="chkHolder">
  <input type="checkbox" class="chk" name="a" id="a" />
  <input type="checkbox" class="chk" name="b" id="b" />
</div>
<a href="#">check all</a>
</body>
</html>

Когда я нажимаю на гиперссылку "проверить все", я хочу, чтобы событие изменения было запущено для каждого из флажков. Однако этого не происходит.

Любые идеи?

Большое спасибо!

Ответ 1

use: $('.chk').attr('checked', true).change();

Пример в реальном времени: http://jsfiddle.net/NRPSA/1/

Ответ 2

При изменении атрибута также используйте следующее:

$('.chk').trigger('change');

Или в вашем коде, как другие люди предложили:

$('.chk').attr('checked', true).trigger('change');

Ответ 3

Попробуйте изменить

$('a').click(function() {
      $('.chk').attr('checked', true);
});

To -

$('a').click(function() {
      $('.chk').attr('checked', true).trigger('change');
 });

Это должно вызвать триггер события "change".

Рабочая демонстрация - http://jsfiddle.net/ipr101/pwmBE/

Ответ 4

попробуйте это.

<div id ="chkall"> <a href="#">check all</a> <div>

            $('#chkall a').live("change", function() {
            $('.chk').attr('checked', true);
            });