Check all checkboxes doesn't work on second use

Question

I'm attempting to create a list of checkboxes with an All and None checkbox at the end.

Upon clicking these checkboxes there's quite a heavy operation so it's vital that the checking and unchecking process doesn't cause a click event on each child checkbox!

Here's my JS:

$(document).ready(function(){
  $('#AllCheckbox').click(function(){                               
  $('#NoneCheckbox').removeAttr('checked');
  $('.TypeCheckbox').attr('checked', 'checked');                                        
});

$('#NoneCheckbox').click(function(){
  $('#AllCheckbox').removeAttr('checked');
  $('.TypeCheckbox').removeAttr('checked');                 
});

$('.TypeCheckbox').click(function(){
  alert('Type checkbox was clicked');
  $('#AllCheckbox').removeAttr('checked');
  $('#NoneCheckbox').removeAttr('checked');
  });
});

Here's my html:

<label for="1Checkbox">1</label><input type="checkbox" ID="1Checkbox" class="TypeCheckbox" />
<label for="2Checkbox">2</label><input type="checkbox" ID="2Checkbox" class="TypeCheckbox" />
<label for="3Checkbox">3</label><input type="checkbox" ID="3Checkbox" class="TypeCheckbox" />
<label for="AllCheckbox">All</label><input type="checkbox" ID="AllCheckbox" />
<label for="NoneCheckbox">None</label><input type="checkbox" ID="NoneCheckbox" />

I've created a JSFiddle.

If you click 'All' it works great, all the numbered checkboxes are checked. However click 'None' then 'All' again and the second time the numbered checkboxes are not checked. Why not?

Answer 1

Use .prop() instead of .attr()

Example

$('.TypeCheckbox').prop('checked', true/false); 

I very good explanation is given at .prop() vs .attr() do visit it.

Working Fiddle

EDIT:

On second thought I feed you don't need None checkbox see DEMO

Answer 2

Use .prop()

$(document).ready(function () {
$('#AllCheckbox').click(function () {
    $('#NoneCheckbox').prop('checked',false);
    $('.TypeCheckbox').prop('checked', "checked");
});

$('#NoneCheckbox').click(function () {
    $('#AllCheckbox').prop('checked',false);
    $('.TypeCheckbox').prop('checked',false);
});

$('.TypeCheckbox').click(function () {
    alert('Type checkbox was clicked');
    $('#AllCheckbox').prop('checked',false);
    $('#NoneCheckbox').prop('checked',false);
});
});

Demo

Answer 3

Use .prop() here is the demo link http://jsfiddle.net/dhana36/7hsQ4/2/

Answer 4

You should use prop, not attr:

$('#AllCheckbox').click(function () {
  $('input:checkbox').prop('checked', 'checked');
});

$('#NoneCheckbox').click(function () {
  $('input:checkbox').removeAttr('checked');
});