javascript - 在 JavaScript 中计算复选框

Question

我想知道你是否可以帮我解决这个问题。我对 JavaScript 很陌生，但这已经让我很长时间了，我已经没有关于如何解决这个问题的想法了。基本上，如果用户单击下面的复选框之一，则复选框的 Data-price 属性应显示在总框中，因此第四个。例如，用户单击值为 14 的复选框，则价格 13 将显示在总框中，如果用户单击另一个复选框，例如最后一个值为 9 的复选框，则它将计算两个复选框 16 + 13 然后将在总框中显示新数字

我已经无数次尝试了我的代码，但它不会在总框中显示任何内容。我真的希望我已经清楚这一点，如果你能帮助我，我将不胜感激

HTML

<form id=BookingForm method="get"
    <section id="bookEvents"
        <div class="item">
            <input type='checkbox' name='event[]' value='6' data-price='18.50'>
            <input type='checkbox' name='event[]' value='14' data-price='13.00'>
           <input type='checkbox' name='event[]' value='11' data-price='35.00'>
           <input type='checkbox' name='event[]' value='9' data-price='16.00'>
        </div>
    </section>

    <section id="checkCost">
        Total <input type="text" name="total" size="10" readonly>
    </section>

JavaScript

window.addEventListener('load', function () {
    "use strict";

    const l_form = document.getElementById('bookingForm');  
    l_form.CheckValue.onclick = calculateTotal;  

    function calculateTotal() {
        let l_total = 0;  

        const l_item = l_form.querySelectorAll('div.item');  
        const l_checkboxesCount = l_checkboxes.length;  

        for (let t_i = 0; t_i < l_checkboxesCount; t_i++) {
            const t_item = l_item[t_i];  
            const t_checkbox = t_ckbox.querySelector('input[data-value][type=checkbox]');

            if (t_checkbox.checked) {
                l_total += t_checkbox.dataset.price;
            } 
            l_form.submit.value = l_total;  
        }
    }
});

Answer 1

您提供的代码存在多个问题...我将尽可能多地列出...

以下没有收>符号...

<form id=BookingForm method="get"
<section id="bookEvents"

您没有关闭 <form>带有 </form> 的元素

您正在寻找 document.getElementById('bookingForm'); ，但表单的 ID 为 BookingForm ... javascript 区分大小写，因此不匹配。相反，您应该更改 id在元素中，或者在函数调用中元素的名称。

您正在使用 l_form.CheckValue但没有什么机智CheckValue作为您提供的代码中的 ID

在代码末尾，您没有正确关闭 addEventListener函数，应该有});

根据 @fcalderan 的评论在下面你不是把数字加在一起......你实际上是在连接字符串

Wrong: l_total += t_checkbox.dataset.price;
Fixed: l_total += parseFloat(t_checkbox.dataset.price);