Checking all checkboxes

Problems:

• Wanting to check all checkboxes when the checkbox w/id=checkall is checked.

• Wanting to uncheck the "checkall" box when any other checkbox is unchecked.

Solution:

$(document).ready(function () {
$('#checkall').on('click', function () {
if ($(this).is(':checked')) {
    $('input[type="checkbox"]').each(function () {
        console.log(this);
        this.checked = true;
    });
} else {
    $('input[type="checkbox"]').each(function () {
        this.checked = false;
    });
}
// Uncheck "Checkall" if any other checkbox is unchecked
if ($('#checkall').is(':checked')) {
    $('input[type="checkbox"]:not("#checkall")').click(function () {
        console.log(this);
        $('#checkall').attr('checked', false);
    });
}
});
});

I'm new with jQuery and I'm not sure if what I've written is really and truly "production value" code, but it is operational. It's not a matter of life and death, it's really just a personal project I'm working on that will likely be used by myself and some friends only. I am in the game to learn, though, and if the code can be improved upon please point me in the right direction to read about it more in depth. I've only been able to find bits and pieces on this topic.

You can streamline the code by caching the selectors; this will improve performance as well. Next, you should use prop instead of attr as the jQuery documentation states:


The .prop() method should be used to set disabled and checked instead
of the .attr() method.

Lastly, instead of using an if..else statement, you can write the condition inline, since checked expects a boolean, and the expression resolves to a boolean. In other words:

// Cache selectors
var $all = $('#checkall');
var $checks = $('input[type="checkbox"]').not($all);

$all.on('click', function () {
  $checks.prop('checked', $(this).is(':checked'));
});

$checks.on('click', function() {
  var checked = $checks.filter(':checked').length;
  $all.prop('checked', checked === $checks.length);
});

Here is a demo: http://jsfiddle.net/z7qy10nn/

StackExchange Code Review Q#95934, answer score: 7