JQuery Form Handling

Question

У меня есть страница выбора продукта, где вы выбираете телефон и план, используя радио-кнопки, и мне нужен jQuery для отображения «текущего выбора». Например у меня 2 телефона с двумя планами:

Nokia N95 и Nokia N96, 35 долларов США в месяц и 50 долларов США в месяц

У каждой из этих «опций» есть свой переключатель. Когда N95 и план $ 50 / месяц выбраны, мне нужно отобразить эту информацию в div:

Ваш текущий заказ
Телефон: Nokia 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 />