jquery selectall not function properly after deselect

Question

I need a solution about my problem. I load my page, click on my first checkbox and all checkbox are checked. Great! After I repeat the operation, deselect first checkbox and all checkbox are deselected. Great!

But if I click again on the first checkbox, nothing happens apparently, but with firebug I see that each checkbox is checked, but it does not appear as checked.

Can you help me?

My code:

// add multiple select / deselect functionality
$("#selectall").click(function () {
    $('.case').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function () {
    if ($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }
});

here a demo

Answer 1

Change:

$('.case').attr('checked', this.checked);

to

$('.case').prop('checked', this.checked);

Updated fiddle here.

More information here.