cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

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

            
          
!
999px
Loading ..................

Console