How to switch between checkboxes and radio buttons JavaScript

Question

I have this code where I am creating some questions. My question looks like this:

My problem is that at these options I have made checkboxes. Although when the "Multiple Answers" button is turned off I want to make the user have 1 option maximum. So I imagine that I have to convert these checkboxes into radio buttons. I don't know if there is an easier way to do this.

Does anyone know how can I change my code so that if let's say var allowMultipleAnswers = true to be able to select more than one options, but when it is false to be able to choose only 1 option.

This is my function where I create options:

function newOption(parentDiv) {
  var buttonId = 2;
  var numberOfThisOption = 1;
  var optionText = "Option ";

  var optionDiv = document.createElement("div");
  optionDiv.className = "mb-3 option row";
  /***************************************** */
  var button = document.createElement("input");
  button.className = "col-1 offset-1 buttonForOption";
  button.setAttribute("type", "checkbox");
  button.setAttribute("style", "flex-basis: 2% !important;");

  button.id = buttonId;
  optionDiv.appendChild(button);
  /***************************************** */
  var label = document.createElement("label");
  label.className = " ml-4 col-6 labelForOption text-left";
  // label.setAttribute("for", buttonId);
  label.setAttribute(
    "style",
    "margin-bottom: 0rem !important; border: solid 1px; border-color: #d6d6d6;  padding-left: 10px !important; border-radius: 3px; width: 90%"
  );
  optionDiv.appendChild(label);
  /***************************************** */
  var actualText = document.createElement("span");
  actualText.className = "textForOption";
  label.setAttribute("contenteditable", "true");
  actualText.textContent = optionText + numberOfThisOption;
  label.appendChild(actualText);
  /***************************************** */

  parentDiv.appendChild(optionDiv);
}

You need to do two things... first is change the "type" attribute to "radio" and then add a new attribute called "name" which is shared across all radios (to link them together) — freefaller
– freefaller, Commented Jul 28, 2022 at 13:43

mplungjan · Accepted Answer · 2022-07-28 14:21:32Z

1

Sure. Just pass in a boolean true to not make radios and remember to give a name

function newOption(parentDiv,allowMultipleAnswers) {

  var button = document.createElement("input");
  button.className = "col-1 offset-1 buttonForOption";
  button.setAttribute("type", allowMultipleAnswers  ? "checkbox" : "radio");
  button.setAttribute("style", "flex-basis: 2% !important;");
  button.id = buttonId;
  button.name = buttonId;
  optionDiv.appendChild(button);

To toggle them all, try

  parentDiv.querySelectorAll(".buttonForOption")
    .forEach(button => button.type = allowMultipleAnswers ? "checkbox" : "radio");

edited Jul 28, 2022 at 14:21

answered Jul 28, 2022 at 13:42

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Costa Over a year ago

What if the options are created already. I mean say we have 5 options, and the user then deactivates the allowMultipleAnswers buttons. Maybe I should make a function that is like changeAllCheckboxesToRadio() ? What do you think?

mplungjan Over a year ago

Ah, you are making a quiz MAKER, not making a quiz. See update

José Bustamante · Accepted Answer · 2022-07-28 13:47:02Z

0

you could:

use checkboxes only and make all the logic "manually"
have radio buttons and checkboxes displayed in function of the top toggle
playing with the name attribute using radio buttons only

edited Jul 28, 2022 at 13:47

answered Jul 28, 2022 at 13:45

José Bustamante

174 bronze badges

2 Comments

mplungjan Over a year ago

have radio buttons and checkboxes displayed in of function of the top toggle what does that mean? And why play with the name. The name can be there always, but is only limiting in radios

José Bustamante Over a year ago

i mean you can just have <div class="myCBs"> </div> and <div class="myRBs"><div> bind both to the same functions or vars and just display: none the one you don't want to choose. Not best practice but quick not hard thinking solution

Collectives™ on Stack Overflow

How to switch between checkboxes and radio buttons JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related