如何爲一個帶有數值的複選框創建JS If If語句？

Question

我想爲我的網站創建一個基本的定價計算器，以便客戶可以獲得成本的基本估計。對於我試圖製作複選框的部分價格，如果選擇了複選框，則會在總價格中增加100。但是，如果它沒有被選中，則沒有任何東西被添加到總數中。我一直在嘗試使用下面的代碼，但我絕對沒有做正確的事情。預先感謝您的幫助。我是全新的JS和HTML世界，所以我很感激幫助！

我已經在下面包括我當前的JavaScript了。我希望將第1號和第2號作爲文本框，將第3號作爲複選框。

var button = document.getElementById("submitButton"); 
button.addEventListener("click", function() { 

var num1 = document.getElementById('Number1').value; 

var num2 = document.getElementById('Number2').value; 

var num3 = if (document.getElementById('Number3').value == 1) 
{ 
document.getElementById('Number3').value = '100'; 
} 
else if (document.getElementById('Number3').value == 0) 
{ 
value = '0'; 
} ; 

var answer = parseInt(num1) + parseInt(num2) + parseInt(num3); 

document.getElementById('Answer').innerHTML = answer; 



}, true); 

Answer 1

您的JS多個錯誤。第一個來自：

var num3 = if (document.getElementById('Number3').value == 1) 
{ 
    document.getElementById('Number3').value = '100'; 
} 
else if (document.getElementById('Number3').value == 0) 
{ 
    value = '0'; 
} ; 

這是一個語法錯誤。你也可以使用三元運算符：

var num3 = document.getElementById('Number3').checked ? 100 : 0; 
// condition ? value to return if true : value to return if false 

你還需要檢查您輸入的值不是undefined併爲其指定一個默認值：

var num1 = document.getElementById('Number1').value || 0; 
var num2 = document.getElementById('Number2').value || 0; 

見工作示例：

var button = document.getElementById("submitButton"); 
 

 
button.addEventListener("click", function() { 
 
    var num1 = document.getElementById('Number1').value || 0; 
 
    var num2 = document.getElementById('Number2').value || 0; 
 
    var num3 = document.getElementById('Number3').checked ? 100 : 0; 
 

 
    var answer = parseInt(num1) + parseInt(num2) + num3; 
 

 
    document.getElementById('Answer').innerHTML = answer; 
 
}, true);

<input id="Number1"/> 
 
<input id="Number2"/> 
 
<input id="Number3" type="checkbox"/> 
 
<button id="submitButton">Go</button> 
 
<div id="Answer"></div>

Answer 2

相反的：

var num3 = if (document.getElementById('Number3').value == 1) 

使用：

if(document.getElementById("Number3").checked){ 
//add the values here 
} 

希望這有助於