jQuery表格處理

Question

我有一個產品選擇頁面，您可以使用單選按鈕選擇手機和計劃，我需要jQuery來顯示「當前選擇」。比如我有2部電話有兩個計劃：

諾基亞N95和諾基亞N96，$ 35 /月和$ 50 /月

每一種「選擇」有它自己的單選按鈕。當N95和$ 50 /月計劃選擇我需要顯示在一個div這樣的信息：

您目前的訂單
電話：諾基亞N95
計劃：$ 50 /月

任何幫助將不勝感激！ :)

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

這應該是非常靈活的。它將允許您不必提前定義所有組合，它將適應您在收音機箱中放置的任何選項。只要選擇任一選項（計劃/電話），它就會顯示摘要。你可能想要清理一下，也許不使用收音機項目的值來顯示字符串（推薦標籤），但可以得到以下想法：

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