我创建了一个包含单选按钮的测验应用程序,但我希望单选按钮以垂直线显示,周围有框.我尝试通过调用选择 ID 来使用 CSS 执行此操作,但它不起作用.
I created a quiz app which contains radio buttons but I want the radio button to display in a vertical line with boxes around it. I tried doing this with CSS by calling the choices ID but it did not work.
我希望它的外观示例:
而不是这个:
var quiz = [{
"question": "What is the full form of IP?",
"choices": ["Internet Provider", "Internet Port", "Internet Protocol" , "Other"],
"correct": "Other"
}, {
"question": "Who is the founder of Microsoft?",
"choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak" , "Martin Shaba"],
"correct": "Bill Gates"
}, {
"question": "What was your first dream?",
"choices": ["8 bits", "64 bits", "1024 bits"],
"correct": "8 bits"
}, {
"question": "The C programming language was developed by?",
"choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"],
"correct": "Dennis Ritchie"
}, {
"question": "What does CC mean in emails?",
"choices": ["Carbon Copy", "Creative Commons", "other"],
"correct": "Carbon Copy"
}];
// define elements
var content = $("content"),
questionContainer = $("question"),
choicesContainer = $("choices"),
scoreContainer = $("score"),
submitBtn = $("submit");
// init vars
var currentQuestion = 0,
score = 0,
askingQuestion = true;
function $(id) { // shortcut for document.getElementById
return document.getElementById(id);
}
function askQuestion() {
var choices = quiz[currentQuestion].choices,
choicesHtml = "";
// loop through choices, and create radio buttons
for (var i = 0; i < choices.length; i++) {
choicesHtml += "<input type='radio' name='quiz" + currentQuestion +
"' id='choice" + (i + 1) +
"' value='" + choices[i] + "'>" +
" <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>";
}
// load the question
questionContainer.textContent = quiz[currentQuestion].question;
// load the choices
choicesContainer.innerHTML = choicesHtml;
// setup for the first time
if (currentQuestion === 0) {
scoreContainer.textContent = "0 correct out of " +
quiz.length + "";
// submitBtn.textContent = "Submit Answer";
}
var radios = document.querySelectorAll('input[type=radio]');
[].forEach.call(radios, function(radio) {
radio.onchange = function() {
checkAnswer();
}
})
}
function checkAnswer() {
// are we asking a question, or proceeding to next question?
if (askingQuestion) {
// submitBtn.textContent = "Next Question";
askingQuestion = false;
// determine which radio button they clicked
var userpick,
correctIndex,
radios = document.getElementsByName("quiz" + currentQuestion);
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) { // if this radio button is checked
userpick = radios[i].value;
}
// get index of correct answer
if (radios[i].value == quiz[currentQuestion].correct) {
correctIndex = i;
}
}
// setup if they got it right, or wrong
if (userpick == quiz[currentQuestion].correct) {
score++;
} else {
}
scoreContainer.textContent = "" + score + " correct out of " +
quiz.length + "";
askingQuestion = true;
// change button text back to "Submit Answer"
//submitBtn.textContent = "Submit Answer";
// if we're not on last question, increase question number
if (currentQuestion < quiz.length - 1) {
currentQuestion++;
askQuestion();
} else {
showFinalResults();
}
} else {
}
}
function showFinalResults() {
content.innerHTML = "<h1>You did amazing!</h1>" +
"<h5>Below are your results</h5>" +
"<h2>" + score + " out of " + quiz.length + " questions, " +
Math.round(score / quiz.length * 100) + "%<h2>";
}
window.addEventListener("load", askQuestion, false);
submitBtn.addEventListener("click", checkAnswer, false);
CSS:
#container {
max-width:600px;
height: auto;
background: #59C1DA;
border: 10px solid #333;
border-radius: 5px;
margin: auto;
text-align: center;
}
#content {
border: 10px solid #fff;
padding: 15px;
color: #fff;
#question {
font-weight: bold;
}
#score {
margin-top: 20px;
font-weight: bold;
}
按钮不居中:
您可以仅使用 CSS 在当前 HTML 结构中执行此操作.这是一个例子:
You can do this in your current HTML structure using CSS only. Here's an example:
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
border: 5px solid lightblue;
background-color: lightblue;
cursor: pointer;
display: block;
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
}
input[type="radio"]:checked + label {
border: 5px solid blue;
background-color: dodgerblue;
}
<input id="banana" type='radio' name="quiz" value="banana">
<label for="banana">Banana</label>
<input id="apple" type='radio' name="quiz" value="apple">
<label for="apple">Apple</label>
<input id="strawberry" type='radio' name="quiz" value="strawberry">
<label for="strawberry">Strawberry</label>
<input id="orange" type='radio' name="quiz" value="orange">
<label for="orange">Orange</label>
这篇关于带有 javascript 的单选按钮样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!