How can I assign a class to an element depending on which radio button is selected?

Question

I am trying to create a section, where by selecting a radio button a specific section will get the class active added to it, making it visible. All sections will be hidden initially, but .stage1-row should initially be active, as per the first radio button, which is checked by default. When you click on any of the other radio buttons, the section that's currently 'active' should drop this class so that the other one takes its place. So far I've only managed to attach a class to the radio button itself, but that's not what I need. Is this possible? Here is the base of what I'm trying to achieve.

.stage1-row,
.stage2-row,
.stage3-row,
.stage4-row {
    display:none;
}

.stage1-row.active,
.stage2-row.active,
.stage3-row.active,
.stage4-row.active {
    display:block;
}

<div class="delimiter">

<form>
<ul>
<li><label><input name="stage" type="radio" value="stage1" checked>Stage 1</label></li>
<li><label><input name="stage" type="radio" value="stage2">Stage 2</label></li>
<li><label><input name="stage" type="radio" value="stage3">Stage 3</label></li>
<li><label><input name="stage" type="radio" value="stage4">Stage 3</label></li>
</ul>
</form>

<div class="stage1-row active">
    Stage 1 content
</div>

<div class="stage2-row">
    Stage 2 content
</div>

<div class="stage3-row">
    Stage 3 content
</div>

<div class="stage4-row">
    Stage 4 content
</div>

</div>

Yup it's possible. It's also expected that you do some research and at least try to find your own solution before you ask a question here. Then ask about what's not working for you. Have you bothered to even search for information on this? — gforce301, Apr 11 '18 at 15:59
you haven't shown what you tried, but just a click handler on the inputs and checking the value of the checked input to select the div will do. to remove the class from others, select the div with the class already, and remove it from the classList, and then add it to the new div — ᔕᖺᘎᕊ, Apr 11 '18 at 16:00

score 1 · Accepted Answer · answered Apr 11 '18 at 16:05

This is how I would have done it. Just add active class to the div related to selected checkbox and remove from all others. Something like.

function activate(e){
      document.getElementsByClassName("active")[0].classList.remove("active")
   document.getElementsByClassName(e.value+"-row")[0].classList.add("active")
}

.stage1-row,
.stage2-row,
.stage3-row,
.stage4-row {
    display:none;
}

.stage1-row.active,
.stage2-row.active,
.stage3-row.active,
.stage4-row.active {
    display:block;
}

<div class="delimiter">

<form>
<ul>
<li><label><input name="stage" type="radio" onclick="activate(this)" value="stage1" checked>Stage 1</label></li>
<li><label><input onclick="activate(this)" name="stage" type="radio" value="stage2">Stage 2</label></li>
<li><label><input onclick="activate(this)" name="stage" type="radio" value="stage3">Stage 3</label></li>
<li><label><input onclick="activate(this)" name="stage" type="radio" value="stage4">Stage 3</label></li>
</ul>
</form>

<div class="stage1-row active">
    Stage 1 content
</div>

<div class="stage2-row">
    Stage 2 content
</div>

<div class="stage3-row">
    Stage 3 content
</div>

<div class="stage4-row">
    Stage 4 content
</div>

</div>

score 0 · Answer 2 · answered Apr 11 '18 at 16:14

You can add an onclick attribute to change the document when a button is pressed. Below is a similar example that addresses a very similar question to your own.

How do I add a class to a given element?

For your specific question, I'd try something like this:

<style>

.stage1-row,
.stage2-row,
.stage3-row,
.stage4-row {
    display:none;
}

.stage1-row.active,
.stage2-row.active,
.stage3-row.active,
.stage4-row.active {
    display:block;
}

</style>

<script>
    var selectRow = function(row) {
        // deactivate all active elements
        var activeElems = document.getElementsByClassName("active");
        for (e in activeElems) {
            e.className = e.className.replace("active","");
        }

        // activate the selected element
        document.getElementsByClassName(row)[0].className += " active";
    }
</script>

<div class="delimiter">

<form>
<ul>
<li><label><input name="stage" type="radio" value="stage1" onClick="selectRow(stage1-row)" checked>Stage 1</label></li>
<li><label><input name="stage" type="radio" value="stage2" onClick="selectRow(stage2-row)">Stage 2</label></li>
<li><label><input name="stage" type="radio" value="stage3" onClick="selectRow(stage3-row)">Stage 3</label></li>
<li><label><input name="stage" type="radio" value="stage4" onClick="selectRow(stage4-row)">Stage 3</label></li>
</ul>
</form>

<div class="stage1-row active">
    Stage 1 content
</div>

<div class="stage2-row">
    Stage 2 content
</div>

<div class="stage3-row">
    Stage 3 content
</div>

<div class="stage4-row">
    Stage 4 content
</div>

</div>

For further improvement, you could also pass the value into the html's onClick call to selectRow and concatenate the value in the function with "-row", such as var selectedClassName = elementPassedToFunction.className + "-row", to generate the selected class name inside the function so you can generically pass the element to the function instead of hardwiring the classname to each row in the html. Each line would then look something like, onClick="selectRow(this)" and would be the same on each line. This would allow easier modifications in the future and possibly allow the function to be reused for a similar button somewhere else in the document.

How can I assign a class to an element depending on which radio button is selected?

2 Answers2