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

Javascript if first and second checkbox checked add values to variable

我最近开始学习 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>

If a customer chooses first checkbox option it adds 50 to price, if second then add 150 to price, if both then add 150 and 50 to price.

既然你想要两个,你应该使用两个 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;

您正在尝试为价格增加价值,但此脚本仅适用于一个复选框,因为您正在使用 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;

}