Showing/Hiding a DIV based on one or more checkbox/radiobox selections?

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

obligatory:

Use jQuery

Answer 2

I would set up a parsing function that reacts to every change in any of the form elements, and "compiles" the string containing the bits of information.

You could set this function to the "onchange" event of each element.

How the parsing function will have to look like is really up to what you want to achieve. It could be something like this: (intentionally leaving out framework specific functions)

function parse_form()
 {

  var age_string = "Your computer is"

  var age = document.getElementById("age").value;
  if (age == 1) age_string+= "one year old";
  if (age > 1) age_string+= "more than one year old";

... and so on.

 }

Answer 3

A regular jQuery click listener will do. Making some assumptions about your HTML code (that you're using radio input buttons with label tags whose for attributes correspond to the IDs of the radio buttons):

$("#options input").click(function(){
    var optionID= $(this).attr(id);
    var outputText= $("label[for="+optionID+"]");
    $("#output").text(outputText);
});

This code will accomplish pretty much exactly what you want. If you want separate DIVs for each particular output message, just create divs each with class output with let's say a rel attribute corresponding to the ID of the input button, then:

$("#options input").click(function(){
    var optionID= $(this).attr(id);
    $("div.output[rel!="+optionID+"]").slideUp(function(){
        var outputDiv= $("div[rel="+optionID+"]");
    });
});

This code can be improved by better handling situations in which an already selected option is reclicked (try it... weird things may happen), or if clicks occur very quickly.

Alternately, you can just use the regular onclick attribute for the input radio buttons if you just want to stick to native Javascript. If you're interested in the appropriate code for that, post a comment, and someone will surely be able to help you out.

Answer 4

Here is an example with jQuery that will fit your needs.

// no tricks here this function will run as soon as the document is ready.
$(document).ready(function() {
    // select all three check boxes and subscribe to the click event.
    $("input[name=ComputerAge]").click(function(event) { 
        var display = $("#ComputerAgeTextDisplay"); // # means the ID of the element
        switch (parseInt(this.value)) // 'this' is the checkbox they clicked.
        {
            case 1:
                display.html("Your computer is one year old."); 
                break; 
            case 2:
                display.html("Your computer is two years old."); 
                break; 
            case 3:
                display.html("Your computer is three years old."); 
                break; 
            default:
                display.html("Please select the age of your computer."); 
                break;   
        }
    });
});

Answer 5

<span id='#options'>
  Options:
  <input type='radio' name='options' value='one'>One Year</input>
  <input type='radio' name='options' value='two'>Two Years</input>
  <input type='radio' name='options' value='three'>Three Years</input>
</span>
Output: "<span id='#output'></span>"

...

var labels = { 
  one: "Your computer is One Year Old",
  two: "Your computer is Two Years Old",
  three: "Your computer is Three Years Old"
};

$('#options :radio').click(function() {
   $('#output).html(labels[$(this).val()]);
});

Answer 6

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);