Smart Checkboxes

index.html

<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>

script.js

(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));

Smart-Checkboxes.markdown

Smart Checkboxes

A Pen by Austin Pray on CodePen.

License.

style.css

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;
}