javascript - 如果选中复选框，则在总计中添加 1.50 英镑，如果不添加，则不添加任何内容

Question

您好，我正在尝试制作一个基本表格，如果选中复选框，它会在总价中增加 1.50 英镑的值(value)。所以我让用户输入一个价格(代金券的值(value))，他们可以取货或送货 - 送货费为 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>