如何通过单击选择单选按钮以在单击时更改颜色答案

【问题标题】：How to select radio buttons with click to change color on click如何通过单击选择单选按钮以在单击时更改颜色
【发布时间】：2022-01-11 19:32:27
【问题描述】：

我正在尝试为我的课堂制作一个数学问答游戏。我创建了一个页面来选择用户想要的游戏类型。我创建了一个函数来选择元素，当它被单击以更改颜色但它没有更改颜色时。我已经尝试对样式进行硬编码并且它可以正常工作，但我只想要选择无线电容器时的样式。

const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
const radioInputs = document.querySelectorAll('input');
const bestScores = document.querySelectorAll('.best-score-value');

startForm.addEventListener('click', () => {
  radioContainers.forEach((radioEl) => {
    radioEl.classList.remove('selected-label');
    if (radioEl.childeren[1].checked) {
      radioEl.classList.add('selected-label');
    }
  });
});

RADIO CONTAINER TO BE SELECTED
<div class="radio-container">
  <label for="value-99">99 Questions</label>
  <input type="radio" name="Questions" value="99" id="value-99">
  <span class="best-score">
                            <span>Best Score</span>
  <span class="best-score-value">0.0</span>
  </span>
</div>

【问题讨论】：

请正确格式化您的代码并让您的代码 sn-p 正常工作
我给你做了一个sn-p。您缺少一些 HTML 和 CSS
childeren 拼写错误

标签： javascript html css

【解决方案1】：

我想你是这个意思

从 startForm 委托就可以了，然后我们可以循环遍历 div 来查看 div 中的 radio 是否被选中

const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');

startForm.addEventListener('click', (e) => {
  const tgt = e.target;
  if (tgt.name === "Questions") {
    const parent = tgt.closest('.radio-container')
    radioContainers.forEach(container => container.classList.toggle('selected-label', container === parent && tgt.checked))
  }
});

.selected-label { color: green }

<form id="start-form">
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
</form>

【讨论】：

我不确定我是否没有显示足够的代码，但这不起作用。我的 index.css 中有一个选定标签样式。我的html代码错了吗？

【解决方案2】：

问题有点重复。 change label color radio when checked 我从这里得到了答案，它可以使用 CSS 完成，而无需使用 JavaScript。
（注意一些按钮在点击时有不同的颜色）这是一个sn-p

input[type="radio"]:checked ~ span
{
color:red;

}

input[type="radio"]:checked.correct ~ span
{
color:green;
}

<form id="start-form">
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99" class = "correct">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
  <div class="radio-container">
    <label for="value-99">99 Questions</label>
    <input type="radio" name="Questions" value="99" id="value-99" class = "correct">
    <span class="best-score">Best Score</span>
    <span class="best-score-value">0.0</span>
  </div>
</form>

【讨论】：