How to add more than two options in a drop down custom list radio button?

Question

This is my code, its basically a form having two radio buttons, which when chosen display a different list of options in the drop down.

 var theForm = document.getElementById('theForm'); var rad = theForm.radios; for (var i = 0; i < rad.length; i++) { rad[i].addEventListener('change', function() { theForm.classList.toggle('one'); theForm.classList.toggle('two'); }); }

 .conditional1, .conditional2 { display: none; }.one.conditional1 { display: block; }.two.conditional2 { display: block; } fieldset { margin: 1rem; }

 <form id="theForm" class="one"> <fieldset id="outer"> <legend>Choices</legend> <div class="radio-wrap"> <label for="one">One</label> <input type="radio" id="one" name="radios" value="one" checked> </div> <fieldset class="conditional1"> <legend>If One is set</legend> <div class="radio-wrap"> <input type="radio" id="aye1" name="condition1" value="aye" checked> <label for="aye1">Aye</label> </div> <div class="radio-wrap"> <input type="radio" id="nay1" name="condition1" value="nay"> <label for="nay1">Nay</label> </div> </fieldset> <div class="radio-wrap"> <label for="two">Two</label> <input type="radio" id="two" name="radios" value="two"> </div> <fieldset class="conditional2"> <legend>If Two is set</legend> <div class="radio-wrap"> <input type="radio" id="aye2" name="condition2" value="aye" checked> <label for="aye2">Aye</label> </div> <div class="radio-wrap"> <input type="radio" id="nay2" name="condition2" value="nay"> <label for="nay2">Nay</label> </div> </fieldset> </fieldset> </form>

It works well when you have two options but when you add third radio button it starts malfunctioning.

This is the code where I tried to add more radio buttons:

 var theForm = document.getElementById('theForm'); var rad = theForm.radios; for (var i = 0; i < rad.length; i++) { rad[i].addEventListener('change', function() { theForm.classList.toggle('one'); theForm.classList.toggle('two'); }); }

 .conditional1, .conditional2, .conditional3, .conditional4 { display: none; }.one.conditional1 { display: block; }.two.conditional2 { display: block; }.three.conditional3 { display: block; }.four.conditional4 { display: block; } fieldset { margin: 1rem; }

 <form id="theForm" class="one"> <fieldset id="outer"> <legend>Please Select File</legend> <div class="radio-wrap"> <label for="one">GST</label> <input type="radio" id="one" name="radios" value="one"> </div> <fieldset class="conditional1"> <legend>GST</legend> <div class="radio-wrap"> <input type="radio" id="aye1" name="condition1" value="aye"> <label for="aye1">Aye1</label> </div> <div class="radio-wrap"> <input type="radio" id="nay1" name="condition1" value="nay"> <label for="nay1">Nay1</label> </div> </fieldset> <div class="radio-wrap"> <label for="two">Two</label> <input type="radio" id="two" name="radios" value="two"> </div> <fieldset class="conditional2"> <legend>If Two is set</legend> <div class="radio-wrap"> <input type="radio" id="aye2" name="condition2" value="aye"> <label for="aye2">Aye2</label> </div> <div class="radio-wrap"> <input type="radio" id="nay2" name="condition2" value="nay"> <label for="nay2">Nay2</label> </div> </fieldset> <div class="radio-wrap"> <label for="three">Three</label> <input type="radio" id="three" name="radios" value="three"> </div> <fieldset class="conditional3"> <legend>If Three is set</legend> <div class="radio-wrap"> <input type="radio" id="aye3" name="condition3" value="aye"> <label for="aye3">Aye3</label> </div> <div class="radio-wrap"> <input type="radio" id="nay3" name="condition3" value="nay"> <label for="nay3">Nay3</label> </div> </fieldset> <div class="radio-wrap"> <label for="four">Four</label> <input type="radio" id="three" name="radios" value="four"> </div> <fieldset class="conditional4"> <legend>If Four is set</legend> <div class="radio-wrap"> <input type="radio" id="aye4" name="condition4" value="aye4"> <label for="aye4">Aye4</label> </div> <div class="radio-wrap"> <input type="radio" id="nay4" name="condition4" value="nay4"> <label for="nay3">Nay3</label> </div> </fieldset> </fieldset> </form>

I'm a beginner, so any help is appreciated.

Answer 1

The problem is with the way you are changing the classes on your form.

You are using theForm.classList.toggle() which has a binary action - it either adds the class if it doesn't exist or removes it if it does. That is fine when you only have 2 options - its either going to be "one" or "two".

This doesn't work with more than two classes, so you can do this:

1. Clear the existing class on the form
2. Check what radio button has been clicked
3. Get the id from that radio button
4. Add the corresponding class to the form - your classes match the name of the radio button (eg when you click radio button with id "one", the class name to be added to the form is also "one") - this means you can simply use the id as the class name

You can do that in your for loop like this:

for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        theForm.className = "";    /* remove existing class from the form */
        /* "this" is the clicked radio button, so add it's id as the class */ 
        theForm.classList.add(this.id);    
    });
}

Working example:

 var theForm = document.getElementById('theForm'); var rad = theForm.radios; for (var i = 0; i < rad.length; i++) { rad[i].addEventListener('change', function() { theForm.className = ""; /* remove existing class from the form */ /* "this" is the clicked radio button, so add it's id as the class */ theForm.classList.add(this.id); }); }

 .conditional1, .conditional2, .conditional3, .conditional4 { display: none; }.one.conditional1 { display: block; }.two.conditional2 { display: block; }.three.conditional3 { display: block; }.four.conditional4 { display: block; } fieldset { margin: 1rem; }

 <form id="theForm" class=""> <fieldset id="outer"> <legend>Please Select File</legend> <div class="radio-wrap"> <label for="one">GST</label> <input type="radio" id="one" name="radios" value="one"> </div> <fieldset class="conditional1"> <legend>GST</legend> <div class="radio-wrap"> <input type="radio" id="aye1" name="condition1" value="aye"> <label for="aye1">Aye1</label> </div> <div class="radio-wrap"> <input type="radio" id="nay1" name="condition1" value="nay"> <label for="nay1">Nay1</label> </div> </fieldset> <div class="radio-wrap"> <label for="two">Two</label> <input type="radio" id="two" name="radios" value="two"> </div> <fieldset class="conditional2"> <legend>If Two is set</legend> <div class="radio-wrap"> <input type="radio" id="aye2" name="condition2" value="aye"> <label for="aye2">Aye2</label> </div> <div class="radio-wrap"> <input type="radio" id="nay2" name="condition2" value="nay"> <label for="nay2">Nay2</label> </div> </fieldset> <div class="radio-wrap"> <label for="three">Three</label> <input type="radio" id="three" name="radios" value="three"> </div> <fieldset class="conditional3"> <legend>If Three is set</legend> <div class="radio-wrap"> <input type="radio" id="aye3" name="condition3" value="aye"> <label for="aye3">Aye3</label> </div> <div class="radio-wrap"> <input type="radio" id="nay3" name="condition3" value="nay"> <label for="nay3">Nay3</label> </div> </fieldset> <div class="radio-wrap"> <label for="four">Four</label> <input type="radio" id="four" name="radios" value="four"> </div> <fieldset class="conditional4"> <legend>If Four is set</legend> <div class="radio-wrap"> <input type="radio" id="aye4" name="condition4" value="aye4"> <label for="aye4">Aye4</label> </div> <div class="radio-wrap"> <input type="radio" id="nay4" name="condition4" value="nay4"> <label for="nay3">Nay3</label> </div> </fieldset> </fieldset> </form>