Checkbox True/False - Add To A Calculation

I've been Googling for hours and can't seem to find a solution that matches my query.

I'm trying to create a contact form (using Contact Form 7 on Wordpress), where each user input corresponds to a $ value, which is calculated and displayed live using .innerHTML.

The type=number user inputs work and calculate fine, but I cannot figure out how to have the checkbox contribute to the calculation according to whether the checkbox is checked, or unchecked.

The code I'm using is below, where #pages and #images are a simply type=number input, #gallery is the checkbox that I'm having issues with:

$('#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;
}

Thanks in advance!