If Radio Button Checked Change Parent Div (li) Background - Javascript

September 26, 2023 Post a Comment

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

Solution 1:

This should do it:

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

functionupdateHighlightCheckbox() {
  var selected = this.parentNode.parentNode;
  if (!this.checked)
    selected.className = selected.className.replace(" selected", "");
  elsethis.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: 1em00;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.job-manager-term-checklistli {
  border: 1px solid #ccc;
  overflow: auto;
  padding: 5px;
  margin-left: 5px;
  border-radius: 5px;
  background-color: #ebf1f9;
  width: 20%;
}
.job-manager-term-checklistli:hover {
  background-color: #4e83ca;
  color: #fff;
}
.job-manager-term-checklist.selected {
  background-color: #a2156b;
  color: #fff;
}

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

Solution 2:

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

Solution 3:

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

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

http://jsfiddle.net/4pf9cds3/

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

Solution 4:

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: 1em00;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }

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

.job-manager-term-checklistli:hover { 
  background-color: #4e83ca;
  color: #fff;
  }
.active {
  background-color: red !important;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="field required-field"><ulclass="job-manager-term-checklist job-manager-term-checklist-job_category"><liid="job_listing_category-72"class="popular-category"><labelclass="selectit"><inputvalue="72"type="radio"name="tax_input[job_listing_category][]"id="in-job_listing_category-72">1</label></li><liid="job_listing_category-73"><labelclass="selectit"><inputvalue="73"type="radio"name="tax_input[job_listing_category][]"id="in-job_listing_category-73">2</label></li><liid="job_listing_category-75"><labelclass="selectit"><inputvalue="75"type="radio"name="tax_input[job_listing_category][]"id="in-job_listing_category-75">3</label></li><liid="job_listing_category-76"><labelclass="selectit"><inputvalue="76"type="radio"name="tax_input[job_listing_category][]"id="in-job_listing_category-76">4</label></li><liid="job_listing_category-80"><labelclass="selectit"><inputvalue="80"type="radio"name="tax_input[job_listing_category][]"id="in-job_listing_category-80">5</label></li><liid="job_listing_category-86"><labelclass="selectit"><inputvalue="86"type="radio"name="tax_input[job_listing_category][]"id="in-job_listing_category-86">6</label></li><liid="job_listing_category-98"><labelclass="selectit"><inputvalue="98"type="radio"name="tax_input[job_listing_category][]"id="in-job_listing_category-98">7</label></li></ul></div>

Solution 5:

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

JavaScript Creator