Question

我是JavaScript的新手，我正在尝试编写一些代码，列出表单中的三个价格选项，作为复选框。如果前两个都被选中，我希望总价格下降一定数量。

我的代码基于此问题中的代码： Javascript checkboxes incorrect calculating

他们通过日期变量重置基值。我假设如果我有一个函数将基数设置为负值，如果检查这两个框，那将实现我想要的。我还希望输出在发生这种情况时有额外的标记'每月保存（x）。

但是我不确定如何将变量与复选框相关联。我是否需要按照how to change the value of a variable based on a select option:selected使用jquery？

Answer 1

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>

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

我假设您正在修改先前问题中的recalculate()功能。在该函数中，在获得总和后，添加此项以应用折扣：

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

要将消息写入输出，请将$("#output").html(sum)代码修改为：

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

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

4 个答案: