html - If radio button checked change parent div (li) background - javascript

I have radio button inside li element, I would like to change the background color of the li (the parent div) once the radio button checked. I succeeded to set hover on the li by CSS, but it seems like the :checked not works on parent div. This is my html + css code:

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

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

I will appreciate any help about this issue, Thanks

Share Improve this question edited Dec 2, 2015 at 15:20 Legionar 7,6073 gold badges44 silver badges71 bronze badges asked Dec 2, 2015 at 14:44 ChikoA 531 silver badge4 bronze badges

You can't in CSS... Use javascript, or better jQuery... – Legionar Commented Dec 2, 2015 at 14:47
@Legionar OP asking for a javascript solution. With CSS is obvious that you can't target parent elements – Marcos Pérez Gude Commented Dec 2, 2015 at 14:52
@MarcosPérezGude yes, thats why I wrote "Use javascript, or better jQuery..." – Legionar Commented Dec 2, 2015 at 15:15
The only solution that works for the OP, that's mine, have 2 downvotes. I wait for an explanation. – Marcos Pérez Gude Commented Dec 2, 2015 at 15:34

Add a ment |

7 Answers 7

Sorted by: Reset to default 1

While you've already accepted an answer I'd suggest, if using plain – non-library – JavaScript is preferred, the following:

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

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

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

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

JS Fiddle demo

To show the above using radio <input> elements, but passing in different settings:

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

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

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

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

JS Fiddle demo.

And showing how it might be used for check-boxes:

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

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

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

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

JS Fiddle demo.

References:

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().

This should do it:

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>

You can create a javascript file and change the class of the element like eg:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

You will have to change your <li> to eg:

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

Hope this will point you in the right direction

If I'm understanding your problem correctly, you could do it like this:

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

http://jsfiddle/4pf9cds3/

(Source: Changing background color with CSS on radio button input when :checked )

You can make like this

$('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./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>

Just use this small code :

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

The bad news is you can't do that with CSS only, because of how CSS selectors work.

The good news is, you can do something very close to what you want with CSS only by selecting a sibling of the input, make it cover the whole of the parent and change its bg color.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - If radio button checked change parent div (li) background - javascript - Stack Overflow

7 Answers 7

与本文相关的文章

评论列表(0)