Question

您好我正在尝试制作一个基本表单，如果选中复选框，则会在总价格上添加1.50英镑的价值。所以我有一个用户输入一个价格（代金券的价值），他们可以拿起或交付它 - 交付是1.50英镑。

我对javascript有基本了解，并发现以下代码允许我将两个表单字段一起添加 -

<script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}
//--></script>

HTML

<form name="form" >
Enter a number:
<input name="sum1" onChange="updatesum()" />
and another number:
<input type="checkbox" name="sum2" onChange="updatesum()" value="1.50" checked> 
Their sum is:
<input name="sum" readonly style="border:0px;">
</form>

显然这是有效的，但很明显，无论盒子是否被检查，值都保持在1.50 - 所以我需要一个“if”语句的帮助。已经四处寻找，但真的很困难。

Answer 1

如果选中该复选框，则只需添加值。

<script type="text/javascript">
function updatesum() {
     var deliveryFee = document.form.sum2.checked ? Number(document.form.sum2.value) : 0;
     document.form.sum.value = (document.form.sum1.value -0) + deliveryFee;
}
</script>

你可能想考虑使用像jQuery这样的框架来帮助解决这个问题。它将使编写代码变得更加容易，并帮助您将代码与HTML分开，从而提高可读性和调试能力。

<form name="form" >
    Enter a number:
    <input id="voucher" name="cost" />
    and another number:
    <input type="checkbox" id="deliveryFee" name="fee" value="1.50" checked="checked" > 
    Their sum is:
    <input id="total" name="sum" readonly style="border:0px;">
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready( function() {
        $('#voucher,#deliveryFee').change( function() {
             var fee = Number( $('#deliveryFee:checked').val() || 0 );
             var cost = Number( $('#voucher').val() );
             $('#total').val( cost + fee );
        });
     });
</script>

Answer 2

建议做一些事情：

在输入上设置ID，类型和值。使用getElementById（'id'）来获取和设置值。最重要的是：将输入解析为浮点数，然后求和并分配。

<html>
<head>
<title>
</title>
<script type="text/javascript">
function updatesum(){
    document.getElementById('total').value = 
        parseFloat(document.getElementById('value').value) +
        (document.getElementById('extra').checked?
         parseFloat(document.getElementById('extra').value):0);
}
</script>
</head>
<body>
<form name="form" >
Enter a number:
<input name="value" id="value" onChange="javascript:updatesum();" />
add extra 1.5?
<input type="checkbox" name="extra" id="extra" onClick="javascript:updatesum();"
 onChange="javascript:updatesum();" value="1.50" checked=""> 
Their total is:
<input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
</form>
</body>
</html>

（抱歉我的第一次编辑。我在Javascript上有点生疏。这个解决方案运行正常。）

***注意：添加onClick =“javascript：updatesum（）;”到复选框输入，使其在IE中更好地工作。

如果选中复选框，则添加总计1.50英镑，如果没有添加任何内容

2 个答案: