在 JavaScript 中计算复选框

Question

我想知道你是否可以帮我解决这个问题。我对 JavaScript 还很陌生，但是这对我来说已经有一段时间了，我已经没有关于如何解决这个问题的想法了。基本上，如果用户单击下面的复选框之一，则复选框的数据价格属性应显示在总计框中，依此类推。例如，用户单击值为 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>用 a 关闭该元素</form>

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

• 您正在使用，但您提供的代码中l_form.CheckValue没有任何智能的IDCheckValue

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

• 根据下面@fcalderan的评论，您没有将数字相加......您实际上是在连接字符串

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