Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

    How to make a row of radio buttons single-select using HTML and jQuery?

    Javascript + jQuery
    2
    3
    68
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Cairoshock last edited by avan

      Hello,

      I'm creating a trivia game with JS and jQuery, and I'm trying to make my radio buttons be single-select per question. Right now they are acting like checkboxes. How would I do this? I'm using Bootstrap to create the radio buttons and running a for loop to append them to each question.

      var surveyQuestions = [
      {
      question: "1.) The design for Pac-Man was originally inspired by a...",
      answers: ["Cheese wheel", "Pizza", "Pie chart", "Grapefruit"],
      correctAnswer: "Pizza"
      }
      ];

      var survey = {
      totalScore: 0,
      correctAnswers: 0,
      incorrectAnswers: 0,
      questions: surveyQuestions,

      showSurvey: function () {

      for (i = 0; i < survey.questions.length; i++) {
          console.log(survey.questions[i]);
      
          $(".questions-text").append("<p><strong>" + survey.questions[i].question + "</strong></p>")
      
          for (j = 0; j < survey.questions[i].answers.length; j++) {
              var userChoices = survey.questions[i].answers[j];
              $(".questions-text").append("<div id='option_" + i + j + "'></div>");
              $(".questions-text").append("<p>" + userChoices + "</p>")
              var radioBtn = $('<input type="radio" name="' + userChoices + '" id="' + i + j + '"/>');
              radioBtn.appendTo('#option_' + i + j);
          }
      

      }

      Reply Quote 0
        1 Reply Last reply

      • ?
        A Former User last edited by

        @Cairoshock said in How to make a row of radio buttons single-select?:

        option_

        Hey @Cairoshock

        The reason is for that is because the value for the 'name' attribute has to be the same for each set of options.

        Check out the following W3 School example:

        https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

        Here is what I suggest:

        So change the following line

        var radioBtn = $('<input type="radio" name="' + userChoices + '" id="' + i + j + '"/>');
        
        var radioBtn = $('<input type="radio" name="question_' + i + '" id="' + i + j + '" value="' + userChoices + '/>');
        

        Then make sure you get the correct userChoices value by calling .val() (jQuery) or .value (vanilla javascript)

        Reply Quote 1
          C 1 Reply Last reply

        • ?
          A Former User last edited by

          @Cairoshock said in How to make a row of radio buttons single-select?:

          option_

          Hey @Cairoshock

          The reason is for that is because the value for the 'name' attribute has to be the same for each set of options.

          Check out the following W3 School example:

          https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

          Here is what I suggest:

          So change the following line

          var radioBtn = $('<input type="radio" name="' + userChoices + '" id="' + i + j + '"/>');
          
          var radioBtn = $('<input type="radio" name="question_' + i + '" id="' + i + j + '" value="' + userChoices + '/>');
          

          Then make sure you get the correct userChoices value by calling .val() (jQuery) or .value (vanilla javascript)

          Reply Quote 1
            C 1 Reply Last reply

          • C
            Cairoshock last edited by @Guest

            @avantutor This works, thank you!

            Reply Quote 0
              1 Reply Last reply

            • First post
              Last post