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