Adapt script to work with radio instead of select

Question

I have here a small script that shows/hides certain DIVs depending on which option is selected in a dropdown.

document.getElementById('inquiry').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById("inquiry" + i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(("inquiry" + ++i));
    }
    document.getElementById(this.value).style.display = 'block';
}

This script basically just checks which value is selected in the dropdown (i.e. value="inquiry1"), and then changes the CSS of a DIV with an ID that equals the selected value of the dropdown (i.e. id="inquiry1").

But now the higher-ups want to change the dropdown to a group of radiobuttons, with the same functionality (if the radiobutton with value "inquiry1" is selected, the div with id="inquiry1" should also change.

How would I go about adapting above script to fit radiobuttons?

It's important that the script is flexible enough to allow for more options to be added in the future (hence the "+ i" stuff)

What have you tried? Did you look at [this question](http://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery?rq=1), which tells you how to respond to a radio button being clicked? — Sean Werkema, May 04 '17 at 11:57
I did look at that, but due to my lack of in-depth understanding of scripting, the only thing I could come up with, was to write a script for every value (so if there are 4 options, I would have the same script 4 times, but change one number every time). — Bolteh, May 04 '17 at 12:02

score 0 · Accepted Answer · answered May 04 '17 at 13:21

Here's a solution that uses jQuery to handle the events (since you did tag your question with jquery). I've included lots of comments, as well as enough HTML and CSS so that you can see what's going on.

What's important to notice about it is that it doesn't wire up many many different event handlers, each tied to a different radio button and section, but rather only sets up a single "global" handler that supports all of them, using the value attributes of the radio buttons to tie to the id attributes of the document sections to show or hide.

// Wire up an event handler so that any click on any radio button inside "ul.options" is monitored.
$("ul.options input:radio").on("click", function() {

    // Get the "value" attribute from the radio button that was clicked.
    var chosenOption = $(this).val();
    
    // Hide all of the sections.
    $(".sections > div").hide();
    
    // Now show just the appropriate section for the button that was clicked.
    $("#" + chosenOption).show();
});

// Now simulate a click on the first radio button, so *something* is shown on page load.
$("ul.options input:radio:first").click();

ul.options {
    display: block:
    margin: 1em 0;
    padding: 0;
}

ul.options li {
    display: inline-block;
    margin: 0 1em;
    padding: 0;
}

.sections {
    display: block;
    border: 1px solid #CCC;
    padding: 1em;
}

.sections > div {
    display: none;    /* Don't show any section by default */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- These are the radio buttons you can click on.  They're wrapped in label elements
     so that you can click either the radio button or the text. -->
<ul class="options">
    <li><label><input type="radio" value="option1" name="inquiry" /> Option 1</label></li>
    <li><label><input type="radio" value="option2" name="inquiry" /> Option 2</label></li>
    <li><label><input type="radio" value="option3" name="inquiry" /> Option 3</label></li>
    <li><label><input type="radio" value="option4" name="inquiry" /> Option 4</label></li>
    <li><label><input type="radio" value="option5" name="inquiry" /> Option 5</label></li>
</ul>

<!-- These are the sections that can be shown.  Their ids must match the values
     for the radio buttons. -->
<div class="sections">
    <div id="option1">Here's some content for option 1</div>
    <div id="option2">Here's some other content for option 2</div>
    <div id="option3">Here's some different content for option 3</div>
    <div id="option4">Here's yet more content for option 4</div>
    <div id="option5">Here's altogether different content for option 5</div>
</div>

Superb. Works like a charm. Thanks a lot for the explanation as well, helps to understand whtat's going on in the back :) — Bolteh, May 08 '17 at 08:19

Adapt script to work with radio instead of select

1 Answers1