Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:15
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save austinpray/0f5d6c5179e855892b46 to your computer and use it in GitHub Desktop.
Save austinpray/0f5d6c5179e855892b46 to your computer and use it in GitHub Desktop.
Smart Checkboxes
<h1>smart checkbox group</h1>
<div class="row">
<form name="myform" class="two-up">
<legend>Have you had any of these beers?</legend>
<input type="checkbox" name="checkboxname[]" value="Franziskaner Hefe-Weisse">Franziskaner Hefe-Weisse
<input type="checkbox" name="checkboxname[]" value="Revolver Blood And Honey">Revolver Blood And Honey
<input type="checkbox" name="checkboxname[]" value="Fat Tire">Fat Tire
<input type="checkbox" name="checkboxname[]" value="St. Bernardus Tripel">St. Bernardus Tripel
<input type="checkbox" name="checkboxname[]" value="none">none of the above
<div id="output" class="two-up">Nothing Selected</div>
(function ($) {
// get a collection of only the checked checkboxes.
var getChecked = function () {
return $("input[name='checkboxname[]']:checked");
// extract the values from the checked checkboxes. Returns an array.
var getValues = function () {
return getChecked()
.map(function () {
return this.value;
// handles none of the above unchecking. Takes the initiator element as an arguement.
var noneOfTheAbove = function (initiator) {
var checked = getChecked();
return checked.each(function () {
var userClickedNone = initiator.value === 'none';
var currentElIsNone = this.value === 'none';
// (User clicked "none of the above") XOR (Current Element in the loop is "none of the above")
// (A implies B) implies (not (B implies A))
var uncheck = userClickedNone^currentElIsNone;
if(uncheck) {
$(this).prop('checked', false);
// change handler that ouputs the selected values to the screen
var output = function (e) {
var initiator = typeof e !== 'undefined' ? : {};
var arr = getValues();
var el = $('#output');
if(arr.length > 0) {
if(arr.indexOf('none') > -1) {
// pass the checkbox the user clicked to the noneOfTheAbove method
// output to screen
} else {
// default output if nothing is checked
el.text('Nothing Selected Yet');
// register output handler to all thec `checkboxname` checkboxes
// default output
body {
font-family: sans-serif;
label {
margin: 0.618em 0;
display: block;
#output {
background: #fafafa;
margin: 1em 0;
padding: 1em;
.row {
display: flex;
flex-direction: row;
.two-up {
flex: 1;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment