SO-47692625

by David Thomas

HTML

<input type="checkbox" id="1" name="serviceType" checked="checked" />
<label for="1">Application</label>
<input type="checkbox" id="2" name="serviceType" />
<label for="2">Infrastructure Service</label>
<input type="checkbox" id="3" name="serviceType" />
<label for="3">Platform</label>
<input type="checkbox" id="4" name="serviceType" checked="checked" />
<label for="4">Software</label>

<select name="services">
  <optgroup label="Application">
    <!-- Shown -->
    <option value="Office">Office</option>
    <option value="SAP">SAP</option>
  </optgroup>
  <optgroup label="Infrastructure Service">
    <!-- Hidden -->
    <option value="Router">Router</option>
    <option value="Switch">Switch</option>
  </optgroup>
  <optgroup label="Platform">
    <!-- Hidden -->
    <option value="Server">Server</option>
    <option value="Client">Client</option>
  </optgroup>
  <optgroup label="Software">
    <!-- Shown -->
    <option value="Word">Word</option>
    <option value="Excel">Excel</option>
  </optgroup>
</select>

CSS

label::after {
  content: '';
  display: block;
}

JavaScript

$('input[type=checkbox]').on('change', function(){
  let label = this.labels.length ? this.labels[0] : this.nextElementSibling;
  $('optgroup[label="' + label.textContent.trim() + '"]').toggle( this.checked );
}).change();