JavaScript - 根据选中的复选框更改输出值

Question

我对JavaScript很新颖，我试图编写一些代码，在表单中列出三个价格选项，如复选框。如果前两者都选中，我希望总价格下降一定数量。

我的代码是基于这个问题的代码： Javascript checkboxes incorrect calculating

他们通过重置日期变量的基准值。我假设如果我有一个函数，如果这两个框被选中，将基础设置为负值，那将实现我想要的。如果发生这种情况，我还希望输出具有“每月保存（x）”的附加标签。

但我不知道如何去关于变量与复选框..我需要使用jQuery按照how to change the value of a variable based on a select option:selected？

Answer 1

我假设你正在修改你的recalculate()功能来自您先前的问题。在此功能，您得到您的款项后，添加此应用的折扣：

if ($("#chkBox1,#chkBox2").filter(":checked").length == 2) 
{ 
    sum -= discount; 
} 

写的留言给你的输出，修改$("#output").html(sum)代码这样：

$("#output").html(sum + " Save $" + discount + " per month"); 

Answer 2

if (document.getElementById('checkBox1').checked && document.getElementById('checkBox2').checked) { 
    // Change the price 
} 

Answer 3

有很多方法可以解决这个问题。作为提醒之前，我绝对不要在客户端执行诸如“计算价格”之类的操作。也就是说，您可以计算价格以便向用户显示，但任何实际计算都应在服务器端完成（因为客户端可以调整和操作表单提交）。

我创建了一个简单的例子，它将对选中的复选框的结果进行比较（并简单地显示结果）。有很多方法可以操纵这些代码以适应您的目的。我已经使用了jQuery，但是还有其他一些有趣的选项可用于解决这个问题（例如，查看KnockoutJS）。

<input type="checkbox" class="adjust one" data-value="1.00" id="so1" /> <label for="so1">$1.00</label> <br/> 
<input type="checkbox" class="adjust two" data-value="2.00" id="so2" /> <label for="so2">$2.00</label><br/> 
<input type="checkbox" class="adjust one" data-value="3.00" id="so3" /> <label for="so3">$3.00</label> 

<p> 
    Total: <span class="total"></span> 
</p> 

然后，你想包括下面的JavaScript（以及jQuery库）。

var total; 

var calculateTotal = function() { 
    total = 0.0; 
    $('input[type="checkbox"]:checked').each(function() { 
     total += parseFloat($(this).data('value')); 
    }); 
    $('.total').text(total); 
}; 

$(document).ready(function() { 

    $('input[type="checkbox"]').live('change', function() { 
    calculateTotal(); 
    }); 

    calculateTotal(); //do it for initial price 
}); 

calculateTotal（）将计算基于选择匹配其对应的复选框（类型复选框的输入）总“选中”。然后这将从每个复选框中提取数据属性“值”，并根据该数字计算总数。你的问题的逻辑可能会有所不同，但只需调整calculateTotal应该处理这个问题。最后，只要复选框“更改”（最初一次），就会调用calculateTotal函数。

希望这应该是一个很大的帮助，让你启动和运行。这是一个JSFiddle现场演示。

Answer 4

jquery从来没有必要，但它总是一个加号。因为你正在学习JavaScript，我会建议不要使用框架。

首先你需要一个表（它会更好，如果你向我们展示您的形式是什么样子）：

<form> 

<input type="checkbox" id="first" /><label for="first">First Box</label> <br> 
<input type="checkbox" id="second" /><label for="second">First Box</label> <br> 

<input type="text" id="output" value="5.00"/> 

</form> 

现在的JavaScript

<script type="text/javascript"> 
    var first = document.getElementById("first"); 
    var second = document.getElementById("second"); 

    first.onchange = function() { 
    if (this.checked == true) { 
     document.getElementById("output").value = "new Value"; 
    }else { 
     document.getElementById("output").value = "other Value"; 
    } 
    } 

    ... the same can be done for 'second' .... 
</script>