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

Posted 2023-05-09

【中文标题】复选框 True/False - 添加到计算

【英文标题】：Checkbox True/False - Add To A Calculation

【发布时间】：2018-10-30 08:44:24

【问题描述】：

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

我正在尝试创建一个联系表单（使用 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"]

提前致谢！

【问题讨论】：

究竟是什么问题 - 你得到什么行为？如果选中画廊，“totalGallery”的值是否不会改变？你能包括html吗？

感谢您的回复。选中复选框时，我在“displayTotal”中得到的输出是 NAN。我知道这是“不是一个数字”，但无法弄清楚为什么它会抛出它。

我在答案中提出了一个解决方案。如果这不是问题，你能告诉我如果你写 console.log(totalCost) 控制台会显示什么吗？

控制台显示“Uncaught ReferenceError: totalCost is not defined”。当我更新数字输入时，该函数执行良好，但没有将复选框输入添加到计算中。所以我假设我遗漏了一些没有正确执行复选框作为数字的东西（而不是布尔值？（就JS而言，我不完全确定复选框是如何工作的）。

能否分享一下#pages、#images和#gallery的相关HTML？

【参考方案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>

【讨论】：

感谢您的回复。我尝试复制/粘贴您的代码，但它仍然不适合我

console.log(pages.value, images.value, gallery.checked); （根据另一条评论的建议）返回“3 undefined”。 console.log(displayCost);返回“未捕获的 ReferenceError：displayCost 未在 :1:13 处定义”

@Kirk 它什么时候返回未定义？什么时候在输入框中输入值？

@Kirk 这个displayCost 来自哪里？您在代码中的什么地方使用过它？

对不起，我是个白痴。我应该一直在运行 console.log(displayTotal); - 返回一个 HTMLCollection