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

JavaScript - change value of output based on checkboxes selected

本文关键字：输出 复选框 -根 JavaScript      更新时间：2023-09-26

我对JavaScript相当陌生，我试图编写一些代码，在一个表单中列出三个价格选项，作为复选框。如果前两个都被选中，我希望总价格下降一定数量。

我的代码是基于这个问题中的代码:Javascript复选框计算错误

它们通过日期变量重置基值。我假设如果我有一个函数把底数设为负值如果这两个框都被选中，就会达到我想要的效果。当这种情况发生时，我还希望输出有一个额外的标签'save (x) per month'。

然而，我不确定如何将变量与复选框联系起来。我需要使用jquery为每如何改变一个变量的值基于一个选择选项:选定?

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>

我假设您正在修改您之前问题中的recalculate()函数。在该函数中，在得到总和之后，添加以下内容以应用折扣:

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

将消息写入输出，修改$("#output").html(sum)代码如下:

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

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

有很多方法可以解决这个问题。在我开始之前提醒一下，永远不要在客户端做"计算价格"之类的事情。也就是说，您可以计算价格以显示给用户，但是任何实际的计算都应该在服务器端完成(因为客户端可以调整和操作表单提交)。

我创建了一个简单的示例，它将统计选中复选框的结果(并简单地显示结果)。有很多方法可以操作这段代码来满足您的目的。我已经使用了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()将根据与选择器"checked"匹配的复选框(类型为checkbox的输入)计算总数。然后从每个复选框中提取数据属性"value"，并根据该数字计算总数。您的问题的逻辑可能不同，但只需调整calculateTotal就可以处理这个问题。最后，当一个复选框被"更改"时，calculateTotal函数就会被调用(初始时只调用一次)。

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

相关文章：