如果选中单选按钮更改父div（li）背景 - javascript

Question

我在li元素里面有单选按钮， 我想在选中单选按钮后更改li（父div）的背景颜色。我成功地通过CSS将鼠标悬停在li上，但看起来像：检查不能在父div上运行。 这是我的html + css代码：

＆＃13;

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我将非常感谢有关此问题的任何帮助， 感谢

Answer 1

您可以创建一个javascript文件并更改元素的类，例如：

<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" onclick="changeClass(this, "someClass")">7</label></li> 更改为例如：

{{1}}

希望这会指出你正确的方向

Answer 2

如果我能正确理解您的问题，您可以这样做：

 form input[type="radio"]:checked + label {
   background-color: yellow;
 }

here

（资料来源：http://jsfiddle.net/4pf9cds3/）

Answer 3

这应该这样做：

＆＃13;

＆＃13;

@RequestMapping(value = "/user/{id}", 
        method = RequestMethod.GET, 
        produces = MediaType.APPLICATION_JSON_VALUE, 
        consumes = MediaType.APPLICATION_JSON_VALUE)

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

只需使用这个小代码：

$('input[name*="tax_input"]').change(function() {
    if($(this).is(':checked')) { // Input is checked
        $(this).parent().css('background', 'red');
    } else {
        $(this).parent().css('background', 'white');
    }
});

Answer 5

虽然您已经接受了我建议的答案，但如果使用普通 - 非库 - 首选JavaScript，请执行以下操作：

// named function to handle the changes:
function toggleParentStyle(opts) {

  // the default settings:
  var settings = {

      // activeClass: String, the class-name by
      // which the 'active'/'on' state is denoted:
      'activeClass': 'active',

      // targetElementSelector: String,
      // the CSS selector to identify the elements
      // whose style is to be altered:
      'targetElementSelector': 'li',

      // uniquelyActive: Boolean, determines
      // whether only one element can have the
      // 'active' state/'activeClass' class-name:
      'uniquelyActive' : true
    },

    // caching the 'this' Node:
    trigger = this;

  // iterating over the (possibly) passed-in opts
  // Object that can be used to override the
  // default settings:
  for (var prop in opts) {

    // if the opts Object has prop as an
    // own-property (one not inherited from
    // the Object's prototype):
    if (opts.hasOwnProperty(prop)) {

      // we update the relevant property of
      // the settings Object to be equal to
      // that of the opts Object:
      settings[prop] = opts[prop];
    }
  }

  // caching the targetElementSelector and activeClass
  // with shorter names (for convenience):
  var selector = settings.targetElementSelector,
    c = settings.activeClass,

  // caching the closest ancestor of the element
  // triggering the function that matches the
  // selector:
    ancestor = trigger.closest(selector),

  // finding the currently-active element (if any),
  // moving from the found ancestor element:
    selectedSibling = ancestor

  // to its parentNode:
    .parentNode

  // finding the first/only element in that
  // parent element that matches the selector
  // and has the class-name:
    .querySelector(selector + '.' + c);

  // if settings.uniquelyActive is true, and
  // there is a selected-sibling:
  if (settings.uniquelyActive && selectedSibling) {

    // we remove the class-name:
    selectedSibling.classList.remove( c );
  }

  // here we access the ancestor element's classList,
  // and if the ancestor.classList.contains the class-name
  // (Boolean true) we use the 'remove' method, if it does not
  // contain the class-name (Boolean false) we use the 'add'
  // method, and pass the class-name as an argument:
  ancestor.classList[ancestor.classList.contains( c ) ? 'remove' : 'add'](c);

  // Note: for radio inputs this isn't necessary, as a radio
  // can't be changed by clicking it, but this might be a
  // necessary check were check-box inputs to be used instead.

}

// finding all the radio-inputs in the document:
var radios = document.querySelectorAll('input[type=radio]'),

// converting the HTMLCollection into an Array, using
// Array.prototype.slice and Function.prototype.call():
  radiosArray = Array.prototype.slice.call(radios, 0);

// iterating over the radiosArray using Array.prototype.forEach():
radiosArray.forEach(function(radio) {

  // binding the toggleParentStyle to handle the change
  // event of the radio inputs:
  radio.addEventListener('change', toggleParentStyle);
});

＆＃13;

＆＃13;

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', toggleParentStyle);
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JS Fiddle demo

使用无线电<input>元素显示上述内容，但传入不同的设置：

radiosArray.forEach(function(radio) {
  radio.addEventListener('change', function () {

    // using Function.prototype.call()
    // to set the function's 'this' (the radio input),
    // and passing an Object as the second argument to
    // contain the Opts Object:
    toggleParentStyle.call(this, {

      // allowing multiple elements to be styled as active:
      'uniquelyActive' : false,

      // passing in a different class-name:
      'activeClass' : 'anAlternativeClassName'
    });
  });
});

＆＃13;

＆＃13;

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'
    });
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JS Fiddle demo

并展示它如何用于复选框：

// selecting inputs of type=checkbox:
var checkboxes = document.querySelectorAll('input[type=checkbox]'),

  // convert checkboxes HTMLCollection to an Array:
  checkboxArray = Array.prototype.slice.call(checkboxes, 0);

// exactly as above, but passing in different elements:
checkboxArray.forEach(function(check) {
  check.addEventListener('change', function () {
    toggleParentStyle.call(this, {
      // ensuring multiple checkbox ancestors can be
      // selected:
      'uniquelyActive' : false,
      'activeClass' : 'anAlternativeClassName'
    });
  });
});

＆＃13;

＆＃13;

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 checkboxes = document.querySelectorAll('input[type=checkbox]'),
  checkboxArray = Array.prototype.slice.call(checkboxes, 0);

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JS Fiddle demo

参考文献：

• Array.prototype.forEach()。
• Array.prototype.slice()。
• Document.querySelector()。
• Document.querySelectorAll()。
• Element.classList。
• Element.closest()。
• EventTarget.addEventListener()。
• for...in。
• Function.prototype.call()。
• Node.parentNode。
• Object.hasOwnProperty()。

Answer 6

坏消息是，由于CSS选择器的工作原理，你只能用CSS做到这一点。

好消息是，只需选择输入的兄弟，使其覆盖整个父级并更改其bg颜色，就可以用CSS做一些非常接近你想要的东西。

Answer 7

你可以这样做

$('input[type=radio]').on('change', function() {
    $('li').each(function(){
      $(this).removeClass('active');
    });
    if($(this).prop('checked')) {
      $(this).parent().parent().addClass('active');
    }
});

.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;
  }
.active {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>