Question

首先单击单选按钮时出现NaN错误。当我点击第一个按钮时，该页面有一个单选按钮，它表示NaN，其余2个按钮没有响应

这是我的HTML

<input type="hidden" name="totalamount" id="totalamount" value="<?php echo get_total_amount();?>" /

<input type="radio" name="rmr"  id="payment1" value="3" onclick="updatepayment(this.value)" />
<input type="radio" name="rmr"  id="payment2" value="5.5" onclick="updatepayment(this.value)" />
<input type="radio" name="rmr"  id="payment4" value="10" onclick="updatepayment(this.value)" />
<div id="finalamount">
</div>

我也提到了我的JS

$(document).ready(function(){  
    $('input[name=rmr]').click(function () {  
        //make sure one is checked    
        if($('input[name=rmr]:checked').length > 0) {    
            $('#finalamount').html($("#totalamount").val() * $("input[name=rmr]:checked").val());    
        } 
    }); 
});

Answer 1

三件事：

1）当您使用“totalamount”元素中的金额时，必须要问：您是否确定

value="<?php echo get_total_amount();?>"

...输出有效数字？因为如果没有，那么代码

$('#finalamount').html($("#totalamount").val() * $("input[name=rmr]:checked").val());

...确实会导致NaN。 *运算符将尝试将其两个操作数从字符串转换为数字，当然如果该PHP代码输出的值不是有效数字（例如，如果它是“$ 0.00”或其他），转换结果为NaN。 NaN次任何是NaN。

“totalamount”元素中无效金额的

This example会产生与您描述的行为类似的 lot 。 （那段代码和你的代码不一样，我做了一些非常轻松的重构，见下文。但是为了演示无效的数字，这没关系。）

2）问题文本中隐藏输入的末尾没有>。如果您进行了直接复制和粘贴，我想知道这可能是问题吗？

3）当你使用jQuery时，不需要onclick属性。代替：

$(document).ready(function(){  
   $("input[name=rmr]").click(function(){
        var checked = $("input[name=rmr]:checked");
        updatePayment(this.value);
        if (checked.length > 0) { // make sure one is checked
        {    
            $("#finalamount").html( $("#totalamount").val() * checked.val() );    
        } 
    }); 
});

...假设您希望每次都调用updatePayment。

Live example

将updatePayment折叠到主click行为可以避免DOM0（onclick属性）处理程序和DOM2处理程序（jQuery使用的处理程序）中可能存在的任何问题被称为。

Answer 2

这对我来说很好。请在jsfiddle中找到工作代码。您必须确保totalamount输入中的值是数值。您可以使用parseFloat()将字符串值转换为浮点值。实施例

 parseFloat($("#totalamount").val()) * $("input[name=rmr]:checked").val()

由于javascript会处理类型转换，因此不需要@Crowder parseFloat()。

您尝试在计算之前放置alert() / console.log()命令，以查看totalAmount是否具有非数字值。例如：alert($("#totalamount").val())

得到不是数字（NaN）错误html / js

2 个答案: