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

Question

Im需要在检查输入单选时将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

这里有一个函数，它将在每次检查无线电输入时添加检查的属性

在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。

试试这个小片段：

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>