Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Smart Checkboxes
<h1>smart checkbox group</h1>
<div class="row">
<form name="myform" class="two-up">
<fieldset>
<legend>Have you had any of these beers?</legend>
<label>
<input type="checkbox" name="checkboxname[]" value="Franziskaner Hefe-Weisse">Franziskaner Hefe-Weisse
</label>
<label>
<input type="checkbox" name="checkboxname[]" value="Revolver Blood And Honey">Revolver Blood And Honey
</label>
<label>
<input type="checkbox" name="checkboxname[]" value="Fat Tire">Fat Tire
</label>
<label>
<input type="checkbox" name="checkboxname[]" value="St. Bernardus Tripel">St. Bernardus Tripel
</label>
<label>
<input type="checkbox" name="checkboxname[]" value="none">none of the above
</label>
</fieldset>
</form>
<div id="output" class="two-up">Nothing Selected</div>
</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;
})
.get();
};
// 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' ? e.target : {};
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
noneOfTheAbove(initiator);
}
// output to screen
el.text(getValues().join());
} else {
// default output if nothing is checked
el.text('Nothing Selected Yet');
}
}
// register output handler to all thec `checkboxname` checkboxes
$("input[name='checkboxname[]']").change(output);
// default output
output();
}(jQuery));
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