jQuery проверить все флажки работает только один раз

Question

Почему эта функция на Chrome не работает второй раз?

$('.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'); 
}); 

На первых нажмите он проверяет все, на секунде он неустановленное все ... а на третьем ничего не делает ...

jsfiddle

PS. Он добавляет и удаляет проверенные атрибуты, но визуально он не изменяется.

Chrome 31.0.1650.57 м

Answer 1

Использования prop вместо 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); 
    } 
}); 

jQuery documentation объясняют разницу и перечисляете некоторые случаев, когда вы должны использовать 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); 
}); 

Я надеюсь, что это то, что вы ищете