jQuery check all checkboxes works only once

javascript, jquery

Solution

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`.

Problem

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

Original source