Событие флажка jQuery не запускается?

Question

У меня есть страница с флажками, одним из которых является кнопка «Выбрать все». Поэтому, когда пользователь нажимает кнопку «Выбрать все», он проверяет все остальные поля, а когда щелкает другое поле, снимает флажок «Выбрать все». Вот код.

          $(document).ready(function(event){   
                 //alert('wtf');
            $('#mailSubscribeAll').click(function(event){
                 //alert('wtf');
                $('.mailingCheckbox').attr('checked','checked');
            });             

            $('.mailingCheckbox').bind('click',function(event){
                //alert('wtf');
                $('#mailSubscribeAll').removeAttr('checked');
            });

        });

Итак, моя страница загружается в jQuery нормально, срабатывает первое оповещение. Ни одно из событий щелчка не дает предупреждения. Я дважды проверил мой HTML правильно.

Итак, я использую неправильное событие для jQuery или на моей странице возможен конфликт с другим javascript, который не является jQuery?

Фрагмент HTML:

    <tr>
    <td class="CBT3" colspan="3" height="29">
        <input type="checkbox" class="mailingCheckbox" id="mailNewsAlerts"    value="1" {if $smarty.session.profile.mailNewsAlerts}checked{/if} onclick="subscribeMarkProfile()">
        <label for="mailNewsAlerts"><b>News Alerts</b> - <cite>The latest breaking news from XXXXXXX</cite></label>
    </td>
</tr>    
<tr>
    <td class="CBT3" colspan="3" height="29">
        <input type="checkbox" id="mailSubscribeAll"    value="1" {if $smarty.session.profile.mailSubscribeAll}checked{/if} >
        <label for="mailSubscribeAll"><b>Subscribe me to all XXXXX newsletters!</b> </label>
    </td>
</tr>    

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

Answer 1

 $("input:checkbox #mailSubscribeAll").click(function(event){
   $('.mailingCheckbox').attr('checked','checked');
});  

Выглядит хорошо, но не могли бы вы попробовать этот код сейчас.

Answer 2

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

$('.mailingCheckbox').bind('change', ...

, поскольку у вас есть две функции, вы должны сделать что-то вроде:

function changeMailingCheckbox(...) { ... }
$('.mailingCheckbox').bind('change', changeMailingCheckbox)
$('.mailingCheckbox').bind('click', changeMailingCheckbox)

Answer 3

Работает, как и ожидалось, со следующим кодом:

<div>
  <input type="checkbox" id="mailSubscribeAll"/>
  <input type="checkbox" class="mailingCheckbox"/>
  <input type="checkbox" class="mailingCheckbox"/>
</div>

<script type="text/javascript">
  $(document).ready(function(event){   
    $('#mailSubscribeAll').click(function(){
      $('.mailingCheckbox').attr('checked','checked');
    });             
    $('.mailingCheckbox').click(function(){
      $('#mailSubscribeAll').removeAttr('checked');
    });
  });    
</script>

Это проливает свет на вашу проблему?