jQuery表单处理

Question

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

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

每个选项都有自己的单选按钮。当选择N95和$50/月计划时，我需要在div中显示这些信息：

您当前的订单

手机:诺基亚N95

计划:每月50美元

如有任何帮助，将不胜感激！)

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

​

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

​