Radio button style with javascript

问题

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.

Example of how I want it to look:

Instead of this:

 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;
    }

The buttons are not centered:

回答1:

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>

回答2:

have no time to write code, i'll just try explain the idea:

create the desidered form with divs and text as if no checkbox should exist and implement with js the behavior

at the onClick of each div, change the css class adding "selected", for example, or removing it if present (that means that it was already selected)

not far to implement behavior for single choice

so you could have different appearance for selected item/s.

tip for single selection (one selected at time): in the onClick, if the div is already "selected", remove that class and nothing else (if u want to allow "no selection" mode or do nothing instead"); else remove from all the choicediv the "selected" class and add it to target of onClick.

myDiv.onclick = function(e) {
    if (e.target.classList.contains("selected")) {
        e.target.classList.remove("selected");
    } else {
        for (var i = 0; i < myChoicedivArray.length; i++) {
            myChoicedivArray.classList.remove("selected");
        }
        e.target.classList.add("selected");
    }
    //other onclick code here
}

disclaimer: i have no tested that code, it's just to give an idea

That's all.

来源：https://stackoverflow.com/questions/36183122/radio-button-style-with-javascript

标签

javascript

css

radio-button