jQuery Form Handhabung

Question

Ich habe eine Produktauswahlseite, wo Sie ein Telefon und einen Plan mit Radiobuttons wählen und ich brauche jQuery, um die "aktuelle Auswahl" anzuzeigen. Zum Beispiel habe ich 2 Telefone mit zwei Pläne:

Nokia N95 und Nokia N96, $ 35/Monat und 50 $/Monat

Jede dieser 'Optionen' hat seine eigene Radio-Button ist. Wenn N95 und der Plan $ 50/Monat ausgewählt werden, muss ich in einem div diese Informationen angezeigt werden:

Ihre aktuelle Bestellung
Telefon: Nokia N95
-Plan: 50/Monat $

Jede Hilfe würde sehr geschätzt werden! :)

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

Dies sollte ziemlich flexibel sein. Es wird Ihnen erlauben, nicht alle Kombinationen im Voraus zu definieren, es passt sich an die Optionen an, die Sie in die Radioboxen legen. Sobald eine Option ausgewählt ist (Plan/Telefon), wird die Zusammenfassung angezeigt. Sie finden diese ein wenig reinigen wollen, vielleicht nicht den Wert des Radio-Elements mit dem String erhalten anzuzeigen (ein Etikett empfehlen), aber auf die Idee kommen across:

<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 />