时间戳

首页 > 解决方案 > 在 JavaScript 中计算复选框

javascript - 在 JavaScript 中计算复选框

问题描述

我想知道你是否可以帮我解决这个问题。我对 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;  
        }
    }
});

标签： javascripthtml

解决方案

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

  • 以下没有结束>符号...

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

  • 你没有<form>用 a 关闭元素</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);

推荐阅读