Affichage/masquage d'un DIV basé sur une ou plusieurs sélections checkbox/radiobox?

Question

J'ai déjà posé une question similaire, mais c'était tellement vague que je n'aurais pas pu obtenir la réponse que je voulais. Fondamentalement, je veux qu'un utilisateur puisse choisir parmi plusieurs options et que divers éléments d'information apparaissent en fonction des sélections.

Par exemple:

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

Output: "Your computer is One year old" 

Je veux que la fonctionnalité d'étendre sur plusieurs cases séparées et radioboxes ...?

Est-ce possible?

EDIT:

Son pour un système de recommandation de mise à niveau du matériel qui prend en compte pour votre système actuel.

« Sur la base de votre système actuel, vous devez remplacer votre carte graphique et acheter RAM supplémentaire »

Ce qui pourrait utiliser des facteurs tels que « Quel est l'âge de votre ordinateur? », « Combien de RAM Votre ordinateur possède "," Quelle version de DirectX est votre carte graphique "ou quelque chose comme ça.

Answer 1

Vous auriez besoin d'un moyen d'associer chaque case avec les informations que vous voulez montrer. Vous pouvez par exemple combiner le nom et la valeur pour obtenir une carte d'identité pour montrer, en supposant que les valeurs sont des caractères qui sont valides dans un 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> 

Maintenant, il faut juste un peu de script pour les attacher ensemble:

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

Answer 2

Je voudrais mettre en place une fonction d'analyse qui réagit à chaque changement dans l'un des éléments de formulaire, et "compile" la chaîne contenant les bits d'information.

Vous pouvez définir cette fonction sur l'événement "onchange" de chaque élément.

La façon dont la fonction d'analyse doit ressembler dépend vraiment de ce que vous voulez obtenir. Il pourrait être quelque chose comme ceci: (en laissant intentionnellement cadre des fonctions spécifiques)

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

Une jQuery click listener régulière fera. Faire quelques hypothèses au sujet de votre code HTML (que vous utilisez les boutons d'entrée radio avec des étiquettes d'étiquettes dont pour les attributs correspondent aux ID des boutons radio):

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

Ce code accomplira à peu près exactement ce que vous voulez. Si vous voulez DIVs séparés pour chaque message de sortie particulier, il suffit de créer divs chacun avec classe output avec disons un attribut rel correspondant à l'ID du bouton d'entrée, puis:

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

Ce code peut être améliorée par une meilleure gestion les situations dans lesquelles une option déjà sélectionnée est recliquée (essayez-le ... des choses étranges peuvent se produire), ou si les clics se produisent très rapidement.

Alternativement, vous pouvez simplement utiliser l'attribut normal onclick pour les boutons radio d'entrée si vous voulez juste coller au Javascript natif. Si vous êtes intéressé par le code approprié pour cela, postez un commentaire, et quelqu'un sera sûrement en mesure de vous aider.

Answer 4

Voici un exemple avec jQuery qui répondra à vos besoins.

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