How to check and unchecked all checkbox using header checkbox?

I am trying to check and unchecked all my checkbox using a single check box in my header, this works fine on the first round but stops working afterword

I have tried the following code including .each() function

<input type="checkbox" id="allcenter"><label for="allcenter">All</label>

<input type="checkbox" class="dassoc_cen" value="1" id="dassoc_cen1">                                   
<label for="dassoc_cen1">Cen 1</label>

<input type="checkbox" class="dassoc_cen" value="1" id="dassoc_cen1">                                   
<label for="dassoc_cen1">Cen 1</label>

<input type="checkbox" class="dassoc_cen" value="3" id="dassoc_cen3">                                   
<label for="dassoc_cen3">Cen 3</label>

<script>
    $('#allcenter').on('click',function(){
        if($(this).is(':checked')){
            $('.dassoc_cen').attr("checked",true);
        }else{
            $('.dassoc_cen').attr("checked",false);
        }
    })
</script>

If i check and uncheck the header checkbox for the first time the system works fine but after first round the html attribute "checked" of other checkbox becomes "checked" but it does not reflect it self in browser