Change background-color of div when "radio" is selected

June 13, 2022

I need to change the background-color of the parent div of a input (radio type) when the input is selected, but, if the user selects another input, the original div needs to go back to it’s original color, and change the div of the newly selected input.
So far, i only made a function that changes the div color depending on the selected input, so if i click on another input, both divs will have their color changed. I searched for a solution for this, but couldn’t find any..
The code is this so far:

function changeBg(posicao) {
  var changer = document.getElementById(posicao);
  if (changer.checked = true) {
    changer.style.backgroundColor = "#FFCE00";
  }
}

<div class="posicao" id="um">
  <input class="input-posicao " onclick="changeBg('um')" name="posicao" value="um" type="radio">
</div>

<div class="posicao" id="dois">
  <input class="input-posicao " onclick="changeBg('dois')" name="posicao" value="dois" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('tres')" name="posicao" value="tres" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('quatro')" name="posicao" value="quatro" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('cinco')" name="posicao" value="cinco" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('seis')" name="posicao" value="seis" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('sete')" name="posicao" value="sete" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('oito')" name="posicao" value="oito" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('nove')" name="posicao" value="nove" type="radio">
</div>

In the print, you can see what happens if i select 2 inputs..

>Solution :

You don’t need to attach an event listener to each radio button. Just create a wrapper around each and listen for the change event there (Event Delegation).

And the styling can be done through css with e.g. an active class.
The active can be removed from the previously active element. And then added to the currently active one.

document.querySelector('.radiogroup').addEventListener('change', (evt) => {
  // evt.currentTarget is the .radiogroup element
  // and we search for all elements with the active class
  evt.currentTarget
    .querySelectorAll('.active')
    .forEach(element => {
      // remove the active class from those elements
      element.classList.remove('active')
    })
  
  
  // in this simple case evt.target is the radio button 
  // that became active for more complex event delegation you
  // need to check what evt.target is.
  // search for the ascendant with the class posicao
  // and add the active class to it
  evt.target
    .closest('.posicao')
    .classList.add('active');
}, true);

.posicao {
  display: inline-block;
  background: grey;
}

.active {
  background-color: yellow;
}

<div class="radiogroup">
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
</div>