如果选中单选按钮，则更改父 div (li) 背景 - javascript

Question

我在 li 元素内有单选按钮，我想在选中单选按钮后更改 li （父 div）的背景颜色。我成功地通过 CSS 在 li 上设置了悬停，但 :checked 似乎不适用于父 div。这是我的 html + 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;
  }

<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>

我将不胜感激有关此问题的任何帮助，谢谢

Answer 1

这应该可以做到：

function updateHighlightRadio() {
  var selected = this.parentNode.parentNode.parentNode.getElementsByClassName("selected")[0];
  if (selected) selected.className = selected.className.replace(" selected", "");
  this.parentNode.parentNode.className += " selected";
}

function updateHighlightCheckbox() {
  var selected = this.parentNode.parentNode;
  if (!this.checked)
    selected.className = selected.className.replace(" selected", "");
  else
    this.parentNode.parentNode.className += " selected";
}

window.onload = function () {
  var radios = document.querySelectorAll("input[type=radio]");
  for (var i = 0; i < radios.length; ++i) {
    radios[i].onchange = updateHighlightRadio;
  }

  var checkboxes = document.querySelectorAll("input[type=checkbox]");
  for (var i = 0; i < checkboxes.length; ++i) {
    checkboxes[i].onchange = updateHighlightCheckbox;
  }
}

.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;
}
.job-manager-term-checklist .selected {
  background-color: #a2156b;
  color: #fff;
}

<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>

  <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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
    </li>
  </ul>
</div>