Last active
December 11, 2015 12:38
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can see a demo of it, here…
http://codepen.io/anon/pen/pfrhs