单击单选按钮时，是否会自动添加选中的属性？

Question

当检查输入单选时，我需要将 div 的背景更改为不同的颜色。我在我的开发工具中注意到，当我单击单选按钮时，html 不会将选中的标记添加到输入中。我打算做一些类似 input[type=radio]:checked + label 的事情来应用这个方法。如果 html 没有应用选中的方法，我确定这不起作用吗？一旦用户点击它，我如何让输入单选应用选中的属性？

 <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

使用 javascript

这里有一个函数，每次检查单选输入时都会添加checked属性

在 CSS 中，每个选中的单选都会有一个边距（只是为了可视化更改）

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>

Answer 2

你的提议很好，不需要 Javascript。

试试这个小sn-p：

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>

如果您希望组中的特定单选按钮成为默认选择 - 即如果用户自己没有进行任何选择 - 然后将选中的属性添加到输入：

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>

如果您需要测试输入元素是否被检查，您需要在Javascript中测试属性：inputElement.checked您也可以根据需要在JS中将其设置为true或false。

Answer 3

您可以在您定位的标签中选择特定元素

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>