jQuery on change 功能将无法按预期工作[关闭]答案

【问题标题】：jQuery on change function won't work as intended [closed]jQuery on change 功能将无法按预期工作[关闭]
【发布时间】：2015-01-24 16:25:29
【问题描述】：

我正在构建一个付款表单，向用户显示的总金额取决于他们在表单顶部选择的计划。但是我没有正确编写它，因为当我检查任一单选按钮时都没有发生任何事情。

这是计划选择器代码中的一个 sn-p：

<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

这个sn-p是显示给用户的总金额：

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);
});

如果有人能告诉我我做错了什么，我将不胜感激。

【问题讨论】：

click or change event on radio using jquery的可能重复
对我来说很好：jsfiddle.net/3rror404/12eo9hz5/1
你加载 jquery 了吗？ jsfiddle 为你做到了....
谢谢颠倒，我一定是在其他地方出错了。我应该将金额初始化为每月 3 英镑，而不是空白。

标签： javascript jquery

【解决方案1】：

请检查我创建的 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 中注册事件绑定。

【讨论】：

谢谢基兰。我不敢相信，但我忘了用 $(document) 标签包装 jQuery。小学生错误。成功了。

【解决方案2】：

$('#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

【讨论】：

【解决方案3】：

试试这个代码：

结果会来的：

<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

【讨论】：

谢谢文加特。 JS 需要一个额外的结束括号 ) 在它的末尾。
@user3503285 抱歉，我更正了。