Switch statements are used to check if one value (or variable) is equal to any one of a subset of other values.
For example, if the value of var string has a case of being equal to foo or a case of bar etc. In this case there are multiple variables being checked, so the simple meaning of a switch statement wouldn't fit.
However deep down every boolean is essentially true or false, so you could instead switch the case of another boolean variable, to check if it is equal to any of the others.
Also keep in mind that with switch statements, the function switch checks the argument entered into it exactly, similar to ===, with each of the cases.
So instead of checking one variable to be a boolean value for many, like in if statements, you could do the reverse, and check the many variables against the argument entered into switch, namely, "true" (the result of all boolean values).
Keep in mind though that when checking boolean values, you cannot use switch(1), because in JavaScript 1 !== true, even though 1 == 2 (difference between 3 equal signs (including ! and 2, for more info on the differences, and consequentially, what you can compare the switch cases with, see Which equals operator (== vs ===) should be used in JavaScript comparisons?).
So you could do,
for example:
<!DOCTYPE html>
<html>
<head>
<script>
function testFunc() {
cost = 0;
var isOne = document.getElementById('Maui').checked;
var isTwo = document.getElementById('Oahu').checked;
var isThree = document.getElementById('Hawaii').checked;
switch(true) {
case isOne && isTwo && isThree:
cost = 2100;
break;
case isOne && isTwo:
cost = 1850;
break;
case isTwo && isThree:
cost = (2100 - 1350);
break;
case isOne:
cost = 1350;
break;
case isTwo:
cost = (1850 - 1350 /*based on earlier*/)
break;
case isThree:
cost = 2100 - 1850 //based on earlier
break;
default: cost = 0
}
document.getElementById('cost').innerHTML = cost;
}
</script>
</head>
<body>
<h2>Chose Islands For Package/h2>
<form>
<input type="checkbox" id="Maui">
<label>Maui</label><br>
<input type="checkbox" id="Oahu">
<label>Oahu</label><br>
<input type="checkbox" id="Hawaii">
<label>Hawaii</label><br>
</form>
<button onclick="testFunc()">Price </button>
<p id="cost"> </p>
</body>
</html>
Also notice how the cases which check more than one value are first in the switch/case, because the way it works is it checks each case, and the first one that is true is returned.
Also I added one additional check case that wasn't present before, namely case isTwo && isThree.
But BTW, if you just want to calculate the total price for each place, a much more efficient way is to simply make a map object for name to price value, and loop through all the cases, check its price value, and add it to the cost, like this:
<!DOCTYPE html>
<html>
<head>
<script>
function testFunc() {
cost = 0;
var map = {
Maui: 1350,
Oahu: 500,
Hawaii: 250
};
Array.apply(0, myForm.elements)
.forEach(x => {
if(x.checked) {
var cur = map[x.id]
if(cur) cost += cur;
}
});
document.getElementById('cost').innerHTML = cost;
}
</script>
</head>
<body>
<h2>Chose Islands For Package/h2>
<form id=myForm>
<input type="checkbox" id="Maui">
<label>Maui</label><br>
<input type="checkbox" id="Oahu">
<label>Oahu</label><br>
<input type="checkbox" id="Hawaii">
<label>Hawaii</label><br>
</form>
<button onclick="testFunc()">Price </button>
<p id="cost"> </p>
</body>
</html>
Because the current model for which this is being done requires an N! amount of case checks, with N representing the total cases you have.
So for example if you had 10 options to choose from, you would have to manually write out 10!, or 3,628,800 individual case checks!!!
