Question

我已经谷歌搜索了几个小时，似乎无法找到符合我查询的解决方案。

我尝试创建联系表单（使用Wordpress上的联系表单7），其中每个用户输入对应一个$值，使用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; }是我的复选框遇到问题：

＆＃13;

<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"]

＆＃13;

如上所述，我使用的是WordPress的Contact Form 7插件，因此联系表单代码是短代码和HTML的混合：

＆＃13;

cucumbeOpts.require

＆＃13;

提前致谢！

Answer 1

正如您在下面的代码段中看到的，当您尝试添加number + undefined时，您会得到NaN

＆＃13;

var number = 5;
var undefinedVar;

console.log(number + undefinedVar)

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

复选框正确/错误 - 添加到计算

1 个答案: