jQuery Formulaire de gestion

Question

J'ai une page de sélection de produits où vous choisissez un téléphone et un plan en utilisant les boutons radio et j'ai besoin de jQuery pour afficher la "sélection actuelle". Par exemple, j'ai 2 téléphones avec deux plans:

Nokia N95 et Nokia N96, le mois 35/$ et 50 $/mois

Chacun de ces 'options' a son propre bouton radio. Lorsque N95 et le plan de 50 $/mois sont sélectionnés je dois afficher ces informations dans un div:

Votre commande actuelle
Téléphone: Nokia N95
plan: 50 $/mois

Toute aide serait grandement apprécié! :)

Answer 1

<script> 
$(document).ready(function(){ 
     $("div.plan").hide(); 

     $("input[type=radio]").click(function(){ 
      $("div.plan").hide(); 
      $("div[planid=" + $(this).val() +"]").show(); 
     }); 
}); 
</script> 

<input type="radio" name="plan" value="1" /> Plan 1 <br /> 
<input type="radio" name="plan" value="2" /> Plan 2 <br /> 
<input type="radio" name="plan" value="3" /> Plan 3 <br /> 

<div class="plan" planid="1">Plan 1 details</div> 
<div class="plan" planid="2">Plan 2 details</div> 
<div class="plan" planid="3">Plan 3 details</div> 

Answer 2

Cela devrait être assez flexible. Il vous permettra de ne pas avoir à définir toute la combinaison à l'avance, il s'adaptera à toutes les options que vous mettez dans les boîtes radio. Il affichera le résumé dès que l'une des options est sélectionnée (plan/téléphone). Vous aurez envie de nettoyer ce un peu, peut-être pas en utilisant la valeur de l'élément radio pour obtenir la chaîne à afficher (recommander une étiquette), mais a l'idée à travers:

<script> 
$(document).ready(function(){ 
     $("input[name=plan]").click(function(){ 
      $("#plan_details").html($(this).val()); 
      $("#summary").show(); 
     }); 
     $("input[name=phone]").click(function(){ 
      $("#phone_details").html($(this).val()); 
      $("#summary").show(); 
     }); 
}); 
</script> 

<div id="summary" style="display: none;"> 
<strong>Phone:</strong><span id="phone_details">None Selected</span><br /> 
<strong>Plan:</strong><span id="plan_details">None Selected</span> 
</div> 

<strong>Select Your Plan:</strong><br /> 
<input type="radio" name="plan" value="$35/month" />$35/month<br /> 
<input type="radio" name="plan" value="$50/month" />$50/month<br /> 

<strong>Select Your Phone:</strong><br /> 
<input type="radio" name="phone" value="Nokia N95" />Nokia N95<br /> 
<input type="radio" name="phone" value="Nokia N96" />Nokia N96<br />