When clicked on radio button, does the checked attribute get added automatically?

Question

Im needed to have the background of a div change to a different color when the input radio is checked. Im noticing in my dev tools that when I click on a radio button, the html doesnt add the checked tag to the input. I am planning on doing something like input[type=radio]:checked + label to apply this method. If the html is not applying the checked method, Im sure this would not work? How would I get the input radio to apply the checked property once a user clicks on it?

 <main class="subscription__container">
        <section
          id="preferences"
          class="subscription__container--preferences box"
        >
          <div class="question__container">
            <h3 class="question__container--title">
              How do you drink your coffee?
            </h3>
            <img
              class="question__container--img"
              src="../assets/plan/desktop/icon-arrow.svg"
              alt="arrow"
            />
          </div>
          <div class="options__container">
            <div class="options__container--option">
              <input
                id="capsule"
                type="radio"
                data-preference="Capsule"
                value="Capsule"
                name="preferences"
              />
              <label class="test__trail" for="capsule">
                <h4 class="options__container--title">Capsule</h4>
                <p class="options__container--description">
                  Compatible with Nespresso systems and similar brewers.
                </p>
              </label>
            </div>
            <div class="options__container--option">
              <input
                id="filter"
                type="radio"
                data-preference="Filter"
                value="Filter"
                name="preferences"
              />
              <label class="test__trail" for="filter">
                <h4 class="options__container--title">Filter</h4>
                <p class="options__container--description">
                  For pour over or drip methods like Aeropress, Chemex, and V60.
                </p>
              </label>
            </div>
            <div class="options__container--option">
              <input
                id="espresso"
                type="radio"
                data-preference="Espresso"
                value="Espresso"
                name="preferences"
              />
              <label class="test__trail" for="espresso">
                <h4 class="options__container--title">Espresso</h4>
                <p class="options__container--description">
                  Dense and finely ground beans for an intense, flavorful
                  experience.
                </p>
              </label>
            </div>
          </div>
        </section>

Answer 1

You can select the specific element in the label you are targeting

input[type=radio]:checked+label h4 {
  background: red;
}

<main class="subscription__container">
  <section id="preferences" class="subscription__container--preferences box">
    <div class="question__container">
      <h3 class="question__container--title">
        How do you drink your coffee?
      </h3>
      <img class="question__container--img" src="../assets/plan/desktop/icon-arrow.svg" alt="arrow" />
    </div>
    <div class="options__container">
      <div class="options__container--option">
        <input id="capsule" type="radio" data-preference="Capsule" value="Capsule" name="preferences" />
        <label class="test__trail" for="capsule">
                <h4 class="options__container--title">Capsule</h4>
                <p class="options__container--description">
                  Compatible with Nespresso systems and similar brewers.
                </p>
              </label>
      </div>
      <div class="options__container--option">
        <input id="filter" type="radio" data-preference="Filter" value="Filter" name="preferences" />
        <label class="test__trail" for="filter">
                <h4 class="options__container--title">Filter</h4>
                <p class="options__container--description">
                  For pour over or drip methods like Aeropress, Chemex, and V60.
                </p>
              </label>
      </div>
      <div class="options__container--option">
        <input id="espresso" type="radio" data-preference="Espresso" value="Espresso" name="preferences" />
        <label class="test__trail" for="espresso">
                <h4 class="options__container--title">Espresso</h4>
                <p class="options__container--description">
                  Dense and finely ground beans for an intense, flavorful
                  experience.
                </p>
              </label>
      </div>
    </div>
  </section>
</main>

Answer 2

What you are proposing is fine, no need for Javascript.

Try this little snippet:

input[type=radio]:checked+label {
  background: red;
}

<form>
  <input type="radio" name="group" /><label>I am a label next to an input element</label>
  <input type="radio" name="group" /><label>I am a label next to another one</label>
</form>

If you want a particular radio button in a group to be the default selection - i.e. if the user doesn't make any selection themselves - then add the attribute checked to the input:

input[type=radio]:checked+label {
  background: red;
}

<form>
  <input type="radio" name="group" /><label>I am a label next to an input element</label>
  <input type="radio" name="group" checked /><label>I am a label next to another one and I am the default</label>
</form>

If you need to test whether an input element is checked or not you need to test the property in Javascript: inputElement.checked You can also set this to true or false in JS if you wish.

Answer 3

use javascript

here is a function that will add the checked attribute every time a radio input is checked

in the CSS every checked radio will have a margin (just to visualize the change)

document.querySelectorAll('input[type=radio]').forEach(elem => {
    elem.addEventListener('click', addChecked);
});
function addChecked(){
    document.querySelectorAll('input[type=radio]').forEach(elem => {
        elem.removeAttribute('checked');
    });
    document.querySelectorAll('input[type=radio]:checked')[0].setAttribute('checked', 'true');
}

input[type=radio]:checked {
margin: 50px;
}

<main class="subscription__container">
        <section
          id="preferences"
          class="subscription__container--preferences box"
        >
          <div class="question__container">
            <h3 class="question__container--title">
              How do you drink your coffee?
            </h3>
            <img
              class="question__container--img"
              src="../assets/plan/desktop/icon-arrow.svg"
              alt="arrow"
            />
          </div>
          <div class="options__container">
            <div class="options__container--option">
              <input
                id="capsule"
                type="radio"
                data-preference="Capsule"
                value="Capsule"
                name="preferences"
              />
              <label class="test__trail" for="capsule">
                <h4 class="options__container--title">Capsule</h4>
                <p class="options__container--description">
                  Compatible with Nespresso systems and similar brewers.
                </p>
              </label>
            </div>
            <div class="options__container--option">
              <input
                id="filter"
                type="radio"
                data-preference="Filter"
                value="Filter"
                name="preferences"
              />
              <label class="test__trail" for="filter">
                <h4 class="options__container--title">Filter</h4>
                <p class="options__container--description">
                  For pour over or drip methods like Aeropress, Chemex, and V60.
                </p>
              </label>
            </div>
            <div class="options__container--option">
              <input
                id="espresso"
                type="radio"
                data-preference="Espresso"
                value="Espresso"
                name="preferences"
              />
              <label class="test__trail" for="espresso">
                <h4 class="options__container--title">Espresso</h4>
                <p class="options__container--description">
                  Dense and finely ground beans for an intense, flavorful
                  experience.
                </p>
              </label>
            </div>
          </div>
        </section>