Javascript 如何更改循环中生成的单选按钮的CSS样式

我想在选择单选按钮时更改单选按钮的颜色

我知道默认方法是使用

：checked

，但这似乎不起作用。奇怪的是，

：hover

似乎可以工作，但选中时我似乎无法设置单选按钮的样式

一个复杂的因素是，我需要在JavaScript for循环中创建单选按钮，而不是在HTML文件中逐个创建

我尝试过使用

input[type=radio]

或其变体，但没有效果

抱歉，我对这方面有点陌生，我正在尝试遵循一个教程：(

函数buildquick（）{
//存储HTML输出
常量输出=[]；
//循环遍历每个问题。。。
我的问题(
（当前问题，问题编号）=>{
//存储答案选择列表
常量answers=[]；
//反复阅读问题中的每个答案
对于（当前问题中的字母。回答列表）{
//为每个答案选项添加HTML单选按钮
回答，推(
`
${currentQuestion.answerList[字母][0]}
`
);
}
//将此问题及其答案添加到输出中
输出推送(
`
${currentQuestion.question}
${answers.join（“”）}
`
);
}
);
//将我们的输出列表合并成一个HTML字符串，并将其放在页面上
quizContainer.innerHTML=output.join（“”）；
}

我不确定……你在找这样的东西吗

---

用于（var i=1；i如果您使用jQuery以编程方式设置它们，请使用一个选择器，该选择器以文档加载时可用的元素为目标。最符合逻辑的目标将是单选按钮附加到的父级。jQuery无法以页面加载后添加的元素为目标感谢您的回复并感谢您的帮助！这与我所说的非常接近agined。但是，除了单选按钮本身改变颜色外，我还希望单选按钮的文本在选中时改变颜色。@Archlefirth这也没问题。您可以删除
input:checked
的CSS样式，并使用JS和标签文本以编程方式进行更改。
function buildQuiz(){

  // Store the HTML output
  const output = [];

  // Loop to iterate through each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {
      // Store the list of answer choices
      const answers = [];
      // Iterate through each answer in a question
      for(letter in currentQuestion.answerList){
        // Add HTML radio buttons for each answer choice
        answers.push(
          `<label class="radio">
            <input type="radio" name="question${questionNumber}" value="${letter}">
            ${currentQuestion.answerList[letter][0]}
          </label>`
        );
      }

      // Add this question and its answers to the output
      output.push(
        `<div class="slide">
          <div class="question"> ${currentQuestion.question} </div>
          <div class="answers"> ${answers.join('')} </div>
        </div>`
      );
    }
  );
  // Combine our output list into one string of HTML and put it on the page
  quizContainer.innerHTML = output.join('');
}