Question

我正在构建付款表单，向用户显示的总金额取决于他们在表单顶部选择的计划。但是我没有正确地写它，因为当我选中任一单选按钮时没有任何反应。

这是计划选择器代码的片段：

<form id="payment-form" ...>
...
<label class='control-label'>Plan</label><br>
<input type='radio' name='Product' value='Pro Monthly' checked> Monthly
<input type='radio' name='Product' value='Lifetime'> Lifetime

此代码段是显示给用户的总金额：

Total: <span class='amount'></span>

这是我写的jQuery，用于添加应付到该范围的金额：

$('#payment-form input').on('change', function () {
     var plan = $('input[name=Product]:checked', '#payment-form').val();
     if (plan == "Lifetime") {
         var price = "&pound;30";
     } else if (plan == "Pro Monthly") {
         var price = "&pound;3 a month";
     }
     $("span.amount").html(price);
});

如果有人能告诉我这件事我做错了，我将非常感激。

Answer 1

试试这段代码：

结果将会出现：

<form id="payment-form">
<label class='control-label'>Plan</label><br>
    <input type='radio' name='Product' value='Pro Monthly' checked/> Monthly
    <input type='radio' name='Product' value='Lifetime'/> Lifetime
</form>

Total: <span class='amount'></span>

JS：

$(document).ready(function(){

$('#payment-form input').on('change', function () {
var plan = $('input[name=Product]:checked', '#payment-form').val();

if (plan == "Lifetime") {
    var price = "&pound;30";

} else if (plan == "Pro Monthly") {
    var price = "&pound;3 a month";
}
$("span.amount").html(price);
});
}):

供参考 DEMO

Answer 2

请检查我创建的plunker。

$(document).ready(function() {
$('#payment-form input').on('change', function() {

  var price;
  var plan = $('input[name=Product]:checked', '#payment-form').val();

  if (plan == "Lifetime") {
  price = "30";
  alert(price);
} else if (plan == "Pro Monthly") {
  price = "3 a month";
}
$("#amount").html(price);
 });
});
http://plnkr.co/edit/roUrBSStRbN9aKuJ5vIK

您应该在document.ready中注册事件绑定。

Answer 3

$('#payment-form input').on('change', function () {
 if ($("input[name='Product']:checked").val() == 'Lifetime') {
 var price = "&pound;30";
 } else if ($("input[name='Product']:checked").val() == 'Pro Monthly') {
 var price = "&pound;3 a month";
 }
 $("span.amount").html(price);
});

Demo

关于变更功能的jQuery无法按预期工作

3 个答案: