SO-34045580

by David Thomas

HTML

<div class="field required-field">
  <ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
    <li id="job_listing_category-72" class="popular-category">
      <label class="selectit">
        <input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
    </li>
    <li id="job_listing_category-73">
      <label class="selectit">
        <input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
    </li>
    <li id="job_listing_category-75">
      <label class="selectit">
        <input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
    </li>
    <li id="job_listing_category-76">
      <label class="selectit">
        <input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
    </li>
    <li id="job_listing_category-80">
      <label class="selectit">
        <input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
    </li>
    <li id="job_listing_category-86">
      <label class="selectit">
        <input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
    </li>
    <li id="job_listing_category-98">
      <label class="selectit">
        <input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
    </li>
  </ul>
</div>

CSS

.job-manager-term-checklist {
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.job-manager-term-checklist li {
  border: 1px solid #ccc;
  overflow: auto;
  padding: 5px;
  margin-left: 5px;
  border-radius: 5px;
  background-color: #ebf1f9;
  width: 20%;
}

.job-manager-term-checklist li:hover {
  background-color: #4e83ca;
  color: #fff;
}

li.active {
  background-color: limegreen;
}

li.anAlternativeClassName {
  background-color: #f90;
}

JavaScript

function toggleParentStyle(opts) {
  var settings = {
      'activeClass': 'active',
      'targetElementSelector': 'li',
      'uniquelyActive': true
    },
    trigger = this;

  for (var prop in opts) {
    if (opts.hasOwnProperty(prop)) {
      settings[prop] = opts[prop];
    }
  }

  var selector = settings.targetElementSelector,
    ancestor = trigger.closest(selector),
    c = settings.activeClass,
    selectedSibling = ancestor
    .parentNode
    .querySelector(selector + '.' + c);

  if (settings.uniquelyActive && selectedSibling) {
    selectedSibling.classList.remove(c);
  }

  ancestor.classList[ancestor.classList.contains(c) ? 'remove' : 'add'](c);

}

var radios = document.querySelectorAll('input[type=radio]'),
  radiosArray = Array.prototype.slice.call(radios, 0);

radiosArray.forEach(function (radio) {
  radio.addEventListener('change', function () {
    toggleParentStyle.call(this, {
      'uniquelyActive': false,
      'activeClass': 'anAlternativeClassName'
    });
  });
});