使用 javascript 创建单选按钮

Question

我尝试使用 javascript 动态创建单选按钮（用于我制作的测验项目），但我遇到了问题。 单选按钮已创建，我可以在屏幕上看到它们，但由于某种原因我无法单击它们。

这就是我写的：

    question += '<input type="radio" id="option1" name="question_option" value="option1" style="align-content: center" >firstOption';
    question += '<input type="radio" id="option2" name="question_option" value="option2" style="align-content: center" >secondOption';
    question += '</br><input type="radio" id="option3" name="question_option" value="option3" style="align-content: center" >thirdOption';
    question += '<input type="radio" id="option4" name="question_option" value="option4" style="align-content: center" >fourthOption';
    question += '</form>';
    document.write(question);

Answer 1

我真的不确定你的项目的细节是什么，但这里有一个粗略的例子，说明如何动态呈现单选按钮：D

 const root = document.querySelector('#root'); const questions = [ { name: 'choose an answer', options: [ { name: 'first', isCorrect: false, }, { name: 'second', isCorrect: false, }, { name: 'third', isCorrect: true, }, { name: 'fourth', isCorrect: false, }, ], }, ]; const createOptionRadio = (name) => { const container = document.createElement('div'); const input = document.createElement('input'); input.type = 'radio'; input.className = 'question-option'; input.value = name; input.id = name; input.name = 'question-option'; const label = document.createElement('label'); label.for = name; label.textContent = name[0].toUpperCase() + name.slice(1); container.appendChild(input); container.appendChild(label); return container; }; const createQuestion = (questionObject) => { const container = document.createElement('div'); container.className = 'question-container'; const h3 = document.createElement('h3'); h3.textContent = questionObject.name; container.appendChild(h3); const form = document.createElement('form'); questionObject.options.forEach(({ name }) => form.appendChild(createOptionRadio(name))); container.appendChild(form); return container; }; window.addEventListener('DOMContentLoaded', () => document.body.appendChild(createQuestion(questions[0])));

 <div id="root"></div>

Answer 2

尝试像这样使用。

 $(function () { $('#div-radio-btns').empty(); var question=''; question='<form>'+ '<input type="radio" id="option1" name="question_option" value="option1" style="align-content:center" >firstOption<br>'+ '<input type="radio" id="option2" name="question_option" value="option2" style="align-content: center" >secondOption<br>'+ '<input type="radio" id="option3" name="question_option" value="option3" style="align-content: center" >thirdOption<br>'+ '<input type="radio" id="option4" name="question_option" value="option4" style="align-content: center" >fourthOption'+ '</form>'; $('#div-radio-btns').append(question); });

 <div id="div-radio-btns"></div> <script type="text/javascript" src="js/script.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>