Question

I asked a similar question previously, but it was so vague that I couldn’t possibly have gotten the answer I wanted.

Basically, I want a user to be able to select from multiple options and have various bits of information appear based on the selections.

For example:

"How old is your computer?" 
Options: [x]One Year [ ] Two Years [ ] Three Years

Output: "Your computer is One year old"

I want that functionality to expand over multiple separate checkboxes and radioboxes…?

Is this possible?

EDIT:

Its for a hardware upgrade recommendation system that takes in to account your current system.

“Based on your current system, you need to replace your graphics card and purchase additional RAM”

Which could use factors like
“How old is your computer?”, “How much RAM does your computer have”, “What directX version is your graphics card” or something like that.

Answer 1

You’d need a way to associate each checkbox with the information you wanted to show. You could for example combine the name and value to get an ID to show, assuming the values are characters that are valid in an ID:

<input type="radio" name="age" value="1" /> One year
<input type="radio" name="age" value="2" /> Two years
<input type="radio" name="age" value="3" /> Three years

<div id="age-1"> Your computer is awesome!! </div>
<div id="age-2"> Your computer is so-so </div>
<div id="age-3"> Your computer sucks </div>

Now you just need a bit of script to tie them together:

function showElementsForInputs(inputs) {

    // Set the visibility of each element according to whether the corresponding
    // input is checked or not
    //
    function update() {
        for (var i= inputs.length; i-->0;) {
            var input= inputs[i];
            var element= document.getElementById(inputs[i].name+'-'+inputs[i].value);
            element.style.display= input.checked? 'block' : 'none';
        }
    }

    // Set the visibility at the beginning and also when any of the inputs are
    // clicked. (nb. use onclick not onchanged for better responsiveness in IE)
    //
    for (var i= inputs.length; i-->0;)
        inputs[i].onclick= update;
    update();

}

showElementsForInputs(document.getElementById('formid').elements.age);