复选框 True/False - 添加到计算

Question

我已经在谷歌上搜索了几个小时，但似乎找不到与我的查询匹配的解决方案。

我正在尝试创建一个联系表单（使用 Wordpress 上的联系表单 7），其中每个用户输入对应一个 $ 值，该值是使用 .innerHTML 实时计算和显示的。

type=number 用户输入工作和计算正常，但我不知道如何根据复选框是选中还是未选中来让复选框参与计算。

我使用的代码如下，其中#pages 和#images 是一个简单的type=number 输入，#gallery 是我遇到问题的复选框：

$('#pages').on('change', function() {
 calculateTotal();
});
$('#images').on('change', function() {
 calculateTotal();
});
$('#gallery').on('change', function() {
 calculateTotal();
});
function calculateTotal() {
var pages = document.getElementById('pages');
var images = document.getElementById('images');
var gallery = document.getElementById('gallery');
var totalPages = pages.value * 15;
var totalImages = images.value * 10;
var totalGallery = 0;
if (gallery.checked == true){
totalGallery = 30 } 
else { totalGallery = 0}
var totalCost = 60 + totalPages + totalImages + totalGallery;
document.getElementById('displayTotal').value = "$" + totalCost;
}

如前所述，我正在为 Wordpress 使用 Contact Form 7 插件，因此联系表单代码是简码和 HTML 的混合体：

<div class="quote-left"><label>Number of pages:*[number* number-31 min:0 max:100 id:pages]</label></div>

<div class="quote-left"><label>Number of images:*[number* number-31 min:0 max:100 id:images]</label></div>

<div class="quote-left">[checkbox checkbox-779 id:gallery label_first "Photo gallery / photo slideshow:"]</div>

<div class="quote-left">[checkbox checkbox-996 id:social label_first "Social media links and optimisation:"]</div>

<div class="quote-right">[checkbox checkbox-996 id:legal label_first "Legal information (cookies disclaimer, privacy policy etc):"]</div>

<div class="quote-right">[checkbox checkbox-996 id:email label_first "Email & subscriber integration:"]</div>

<div class="quote-right">[checkbox checkbox-996 id:logos label_first "Logo / branding:"]</div>

<div class="quote-right">[checkbox checkbox-996 id:domain label_first "Domain and hosting:"]</div>

[textarea textarea-713]

<label>Total cost:</label>
[text text-387 readonly id:displayTotal placeholder "$60"]

提前致谢！

Answer 1

正如您在下面的 sn-p 中看到的，当您尝试添加 number + undefined 时，您会得到 NaN

var number = 5;
var undefinedVar;

console.log(number + undefinedVar)

一开始你的值是未定义的，所以我放了一个三元运算符，如果值未定义，则使用默认值作为 0

var pages = document.getElementById('pages');
var images = document.getElementById('images');
var gallery = document.getElementById('gallery');


$('#pages').change(function() {

 calculateTotal();
});
$('#images').change(function() {
 calculateTotal();
});
$('#gallery').change(function() {
 calculateTotal();
});
function calculateTotal() {
var totalPages = pages.value? (pages.value * 15) : 0;
var totalImages = images.value? (images.value * 10) : 0;
var totalGallery = 0;

if (gallery.checked == true){
totalGallery = 30 } 
else { totalGallery = 0}
var totalCost = 60 + totalPages + totalImages + totalGallery;
document.getElementById('displayTotal').innerHTML = "$" + totalCost;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="pages">
<input type="number" id="images">
<input type="checkbox" id="gallery">

<p>total: <span id="displayTotal"></span></p>