English 中文(简体)
Showing/Hiding a DIV based on one or more checkbox/radiobox selections?
原标题:

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.

最佳回答

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);
问题回答

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.

 }

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.

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;   
        }
    });
});
<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()]);
});




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签