5

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>

I will appreciate any help about this issue, Thanks

Legionar
  • 7,472
  • 2
  • 41
  • 70
ChikoA
  • 53
  • 1
  • 4

7 Answers7

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:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Hi David Thomas, Thanks for your well detailed answer, I have 2 questions: 1. It will be better to implement it by jQuery or some other library (I'm using wordpress- so jquery is built-in )? 2. How can I use the first method you published for both radio & checkbox buttons on same form? – ChikoA Dec 04 '15 at 11:05
0

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

Patrick Ziebell Thøgersen
  • 426
  • 3
  • 10
0

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

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

http://jsfiddle.net/4pf9cds3/

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

Community
  • 1
  • 1
Stefan Neuenschwander
  • 823
  • 1
  • 6
  • 23
  • input[type="radio"]:checked won't work on parent div and I can't change the order of the elements because I'm using a wordpress plugin to implement this form – ChikoA Dec 02 '15 at 14:52
  • OP said a javascript solution.... CSS can't target parent elements. Please, read the questions carefully. – Marcos Pérez Gude Dec 02 '15 at 14:53
0

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.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>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • Hi Marcos Pérez Gude, Thanks for your solution, so far its the best I got :) I have 1 more question: if I have more then 1 radio field set the solution will work on both fields, any solution for this issue? – ChikoA Dec 02 '15 at 15:31
  • Yes, you can manage the scope, or target only in the div you need. for example `$('#your-form input[type=radio]')`. – Marcos Pérez Gude Dec 02 '15 at 15:33
  • @Legionar maybe you think that jQuery is .NET? I'm really tired of leading with stupid and incomprehensible downvotes. jQuery is JAVASCRIPT! – Marcos Pérez Gude Dec 02 '15 at 15:36
  • I'm not expert in JS/jQuery, I made a http://jsfiddle.net/9jm14nes/ can you help me with the jquery? – ChikoA Dec 02 '15 at 15:42
  • if you want to use javascript, you add tag javascript, if you want use jquery, you add tag jquery... – Legionar Dec 02 '15 at 15:50
  • @ChikoA here you are: http://jsfiddle.net/9jm14nes/1/ I mark the `
      ` with different classnames to target only the scope. Please, if this answer help you mark as correct answer. I ignore the other comments, because are envy people that downvote the only correct answer here. Brains can't be buyed in a supermarket.
     – Marcos Pérez Gude Dec 02 '15 at 15:54
  • Marcos Pérez Gude you are amazing man, the solution work well, Thanks a lot, BTW because I have several fields I need to implement it by very long code. I guess it will be better to make a separate file for the JS instead of implement it inline, am I right? – ChikoA Dec 02 '15 at 16:07
  • Yes, it's better a separate js file. If you got lots of lists, I can simplify the code to be reusable. Tell me something. Good luck! – Marcos Pérez Gude Dec 02 '15 at 16:09
0

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>
Johan Karlsson
  • 6,419
  • 1
  • 19
  • 28
  • This is also good solution, thanks caeth. I tried to implement it on [type="checkbox"] as well, the problem on checkbox is that it not mark multiple checkboxes, only the last I pick, any solution how to make it work on checkbox as well? – ChikoA Dec 02 '15 at 16:27
  • @ChikoA See my updated answer for how to handle checkboxes – Johan Karlsson Dec 02 '15 at 16:52
  • Hi caeth, Works perfect. Thanks a lot – ChikoA Dec 02 '15 at 18:07
  • Hi Caeth, There is a way to apply this script on radio/checkbox fields that already checked, I mean- If I set my fields to be checked by default, the current setting not show the .selected div – ChikoA Dec 10 '15 at 09:25
0

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');
    }
});
Anthony Bastide
  • 60
  • 5
-1

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.

Victor
  • 9,210
  • 3
  • 26
  • 39