Tri-State-Checkbox veröffentlicht in 2014zuletzt bearbeitet in 2016

<div class="tristate">
  <p class="tristate-anweisung">Welches Gemuese essen Sie?</p>
  <p class="tristate-checkbox" data-label="Ich esse alle Gemüsesorten"></p>
  <div class="tristate-optionen">
    <p><label><input type="checkbox" name="checkbox1" value="1" checked>Kartoffel</label></p>
    <p><label><input type="checkbox" name="checkbox2" value="1" checked>Möhren</label></p>
    <p><label><input type="checkbox" name="checkbox3" value="1" checked>Broccoli</label></p>
    <p><label><input type="checkbox" name="checkbox4" value="1">Rosenkohl</label></p>
    <p><label><input type="checkbox" name="checkbox5" value="1">Aubergine</label></p>
    <p><label><input type="checkbox" name="checkbox6" value="1">Bohnen</label></p>
  </div>
</div>

function tristateInit() {
  var instructionClass = 'tristate-anweisung',
      widgetClass = 'tristate-checkbox',
  optionsClass = 'tristate-optionen';
  $( '.tristate' ) .each( function() {
    var $instruction = $( this ) .children( '.' + instructionClass ),
        $options = $( this ) .children( '.' + optionsClass ) .find('p>label>input[type="checkbox"]' ),
        $widget = $( this ) .children( '.' + widgetClass );
addInstructions( $instruction, $( this ) .children( '.' +optionsClass ) );
addTriStateCheckbox( $widget );
    var $tristate = $widget .find( '[role="checkbox"]' ),
        tristateNewValue = checkOptions( $options );
addTriStateEvents( $tristate, $options );
setTriStateValue ( $tristate, tristateNewValue );
        addOptionsEvents ( $tristate, $options );
  })
}

function addInstructions( $instruction, $optionsGroup ) {
  $optionsGroup .attr( 'aria-label', $instruction .text() );
  $instruction .append( ' Wählen Sie alle oder keine Optionen mit dem ersten Kontrollkästchen aus. Wenn Sie einzelne Antworten mit den darauffolgenden Kontrollkästchen wählen, wird das erste Kontrollkästchen automatisch aktualisiert.' );
}

function addTriStateCheckbox( $widget ) {
  var tristateLabel = $widget .attr( 'data-label' );
      $widget .html( '<button role="checkbox" aria-checked="false"><img src="nicht-aktiviert.png" alt="">' + tristateLabel + '</button>' )
  .removeAttr( 'data-label' );
}

function addTriStateEvents ( $tristate, $options ) {
  $tristate .click( function() {
    var tristateValue = $tristate .attr( 'aria-checked' );
      if ( tristateValue === 'true' ) {
        $tristate .attr( 'aria-checked', 'false' )
        .children( 'img' ) .attr( 'src', 'nicht-aktiviert.png' );
        $options .prop( 'checked', false );
  }
      else {
$tristate .attr( 'aria-checked', 'true' )
        .children( 'img' ) .attr( 'src', 'aktiviert.png' );
        $options .prop( 'checked', true );
      }
  })
}

function addOptionsEvents ( $tristate, $options ) {
  $options .change( function() {
    var tristateNewValue = checkOptions( $options );
    setTriStateValue ( $tristate, tristateNewValue );
  });
}

function checkOptions( $options ) {
  var all = 'true', none = 'true';
  $options .each( function() {
    if ( $( this ) .prop( 'checked' ) === true ) {
      none = 'false';
    }
    else if ( $( this ) .prop( 'checked' ) === false ) {
      all = 'false';
    }
  })
  if (all == 'true' ) {
    return 'true';
  }
  else if ( none == 'true' ) {
    return 'false';
  }
  else {
    return 'mixed';
  }
}

function setTriStateValue ( $tristate, tristateNewValue ) {
  var $image = $tristate .children( 'img' );
  $tristate .attr( 'aria-checked', tristateNewValue );
  if (tristateNewValue === 'true' ) {
    $image .attr( 'src', 'aktiviert.png' );
  }
  else if (tristateNewValue === 'false' ) {
    $image .attr( 'src', 'nicht-aktiviert.png' );
  }
  else if (tristateNewValue === 'mixed' ) {
    $image .attr( 'src', 'teilweise-aktiviert.png' );
  }
}
tristateInit();

.tristate-checkbox  button{
height:5em;
width:20em;
border:none;
background-color:#F3F3F3;
}
.tristate-optionen{
margin-left:4.8em;
}