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