Skip to content

Instantly share code, notes, and snippets.

@nathansmith
Last active December 11, 2015 12:38
Show Gist options
  • Save nathansmith/4602159 to your computer and use it in GitHub Desktop.
Save nathansmith/4602159 to your computer and use it in GitHub Desktop.
For when you need a master checkbox, that will cause others to be checked.
/*
Use like this (or with <dl>, <ol>, <table>)...
<ul>
<li>
<input type="checkbox" class="check-all" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
</ul>
*/
// Module pattern
var check_all = (function($, window, document, undefined) {
// Kickoff
$(document).ready(function() {
check_all.init();
});
// Expose publicly
return {
// check_all.init
init: function() {
// Run on DOM load, and click
function determine_checked(el) {
var parent = el.closest('dl, ol, table, ul');
var master = parent.find('input[type="checkbox"].check-all');
// Exit, if no "check-all" exists
if (!master.length) {
return;
}
var others = parent.find('input[type="checkbox"]').not('.check-all');
var others_checked = others.filter(':checked');
// Is this the master checkbox?
if (el.hasClass('check-all')) {
// Is it checked?
if (el.prop('checked')) {
// Check all
others.prop('checked', true);
}
else {
// Un-check all
others.prop('checked', false);
}
}
// Must be a sibling checkbox
else {
// Are all siblings checked?
if (others.length === others_checked.length) {
// Check master
master.prop('checked', true);
}
else {
// Un-check master
master.prop('checked', false);
}
}
}
$(document.documentElement).off('click.check_all').on('click.check_all', 'input[type="checkbox"]', function() {
var el = $(this);
determine_checked(el);
});
$('input[type="checkbox"].check-all').each(function() {
var el = $(this);
determine_checked(el);
});
}
};
})(jQuery, this, this.document);
@nathansmith
Copy link
Author

You can see a demo of it, here…

http://codepen.io/anon/pen/pfrhs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment