jQuery 表单处理答案

【问题标题】：jQuery Form HandlingjQuery 表单处理
【发布时间】：2009-04-23 12:34:35
【问题描述】：

我有一个产品选择页面，您可以在其中选择电话和使用单选按钮的计划，我需要 jQuery 来显示“当前选择”。例如，我有 2 部手机有两个计划：

诺基亚 N95 和诺基亚 N96，35 美元/月和 50 美元/月

每个“选项”都有自己的单选按钮。选择N95和50美元/月计划计划时，我需要在DIV中显示此信息：

您当前的订单
手机：诺基亚 N95
计划：50 美元/月

任何帮助将不胜感激！ :)

【问题讨论】：

标签： jquery forms object

【解决方案1】：

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

【讨论】：

【解决方案2】：

这应该非常灵活。它将使您不必提前定义所有组合，它将适应您在单选框中放置的任何选项。选择任一选项（计划/电话）后，它将立即显示摘要。您需要稍微清理一下，也许不使用单选项的值来获取要显示的字符串（推荐一个标签），但可以理解这个想法：

$(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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 />

【讨论】：