Smart Checkboxes
A Pen by Austin Pray on CodePen.
<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; | |
} |