Javascript 如果选中第一个和第二个复选框，则将值添加到变量

Question

我最近开始学习 Javascript，我坚信我会写一个像价格计算器一样的脚本。 原始价格为 200。如果客户选择第一个复选框选项，则价格会增加 50，如果第二个则价格会增加 150，如果两者都选择，则价格会增加 150 和 50。 到目前为止，我让他们两个单独工作，但如果两个复选框都被选中，他们不会增加价格。

我该如何解决这个问题？ 我应该使用除 if...else 之外的任何东西吗？

Javascript

function myFunction() {

var price;
var originalprice = 200;
var firstprice = 0;
var secondprice = 0;

var checkBox = document.getElementById('myCheck');
var checkBox2 = document.getElementById('myCheck2');

if (checkBox.checked == true){
    
    firstprice = 50;
    
    
}else if(checkBox2.checked == true){
    
    secondprice = 150;
    
}

else {
    
    price = originalprice;
}

var price = firstprice + secondprice + originalprice;

var el = document.getElementById('showprice');
el.textContent=price;



}

HTML

<h1>Check one or both of the checkboxes</h1>

Yes: <input type="checkbox" id="myCheck" onclick="myFunction()">
No: <input type="checkbox">

Yes: <input type="checkbox" id="myCheck2" onclick="myFunction()">
No: <input type="checkbox">



<div id="showprice">



</div>

Answer 1

如果客户选择第一个复选框选项，它会在价格上加 50，如果是第二个，则在价格上加 150，如果两者都选，则在价格上加 150 和 50。

因为你想要两个你应该使用两个 if 条件而不是else if ，甚至你不必指定最后一个else ，如果两个checkboxes未选中，第一个和第二个价格将采用初始值，即零。 所以试试这个：

var originalprice = 200;
var firstprice = 0;
var secondprice = 0;
if (checkBox.checked == true){
    firstprice = 50;
}
if(checkBox2.checked == true){
    secondprice = 150;
}
var price = firstprice + secondprice + originalprice;

Answer 2

您正在尝试为价格增加价值，但此脚本仅适用于一个复选框，因为您使用的是 if else，只需在此处删除 else 并将默认价格放在顶部，无需将其放入 else。

function myFunction() {


var originalprice = 200;
var firstprice = 0;
var secondprice = 0;
var price = originalprice;

var checkBox = document.getElementById('myCheck');
var checkBox2 = document.getElementById('myCheck2');

  if (checkBox.checked == true){
    firstprice = 50;
  }
  if(checkBox2.checked == true){
    secondprice = 150;
  }

  var price = firstprice + secondprice + originalprice;

  var el = document.getElementById('showprice');
  el.textContent=price;

}