jQuery check all checkboxes works only once

Question

Why this function on Chrome is not working second time?

$('.main').on('change','input[name="select_all"]',function(){
   if($(this).is(':checked')){
      $('input[type="checkbox"]',$(this).parent().parent().parent()).attr('checked',true);
   }else{
      $('input[type="checkbox"]',$(this).parent().parent().parent()).removeAttr('checked');
});

On first click it checks all, on second it unchecks all... but on third does nothing...

jsfiddle

PS. It does add and remove checked attributes, but visually it does not change.

Chrome 31.0.1650.57 m

Answer 1

Use prop instead of attr :

$('.main').on('change','input[name="select_all"]',function(){
    if($(this).is(':checked')){
        $('input[type="checkbox"]',$(this).parent().parent().parent()).prop('checked',true);
    }else{
        $('input[type="checkbox"]',$(this).parent().parent().parent()).prop('checked', false);
    }
});

The jQuery documentation explains the difference and lists some of the cases where you should use prop .

Answer 2

$('.main').on('change','input[name="select_all"]',function(){
   if($(this).is(':checked')){
      $('input[type="checkbox"]',$(this).parent().parent().parent()).attr('checked',true);
   }else{
  $('input[type="checkbox"]',$(this).parent().parent().parent()).attr('checked',false);
});

I hope this is what you are looking for