No JS experience at all. I make a super simple calculator. 2 checkboxes where the cost is registered. One checkbox has an input with the number by which the result of this checkbox is multiplied. And the total should get to the total.

If separately, I mark checkboxes, then everything works. If together then NaN.

var rozetka = 0; var rozetkaCell = 0; var check = 0; $('.input__check').on('change', function () { check = 0; $('input:checkbox:checked').each(function () { if ($(this).prop("checked")) { check = Number(check) + Number($(this).data('check')); } }); summ(); }); $('.rozetka').on('change', function () { rozetka = 0; $('input:checkbox:checked').each(function () { if ($(this).prop("checked")) { rozetka = Number(rozetka) + Number($(this).data('rozetka')); } }); summ(); }); $(".rozetka-cell").change(function () { rozetkaCell = $('.rozetka-cell').val(); summ(); }); function summ() { rozetka = Number(rozetka); rozetkaCell = Number(rozetkaCell); check = Number(check); main = rozetka * rozetkaCell; $("#itogo").text(check + main + ' руб.'); }; 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form action=""> <input class="rozetka" type="checkbox" name="rozetka" id="" data-rozetka="50" value="1"><span>Установка розеток</span> <input class="rozetka-cell" type="number" min="0" name="rozetka-cell" id="" value=""><br> <input class="input__check" type="checkbox" name="lystra" id="" data-check="200"><span>Установка люстры</span> </form> <p>Итого: <strong><span id="itogo"></span></strong></p><br>

    1 answer 1

    Error here:

     $('input:checkbox:checked').each(function () {

    For some reason you go through all the checkboxes, but not all of them have the data-check attribute. The cycle must be removed, and two lines inside the cycle - leave.

     $('form input').on('change input', function() { summ(); }); function summ() { var outlets = 0; var outletCount = +$("[name='rozetka-cell'").val(); if (isNaN(outletCount)) outletCount = 0; if ($("[name='rozetka']").prop("checked")) outlets = +$("[name='rozetka']").data("rozetka") * outletCount; var fixture = 0; if ($("[name='lystra']").prop("checked")) fixture = +$("[name='lystra']").data("check"); $("#itogo").text(outlets + fixture + ' руб.'); }; 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form action=""> <input class="rozetka" type="checkbox" name="rozetka" id="" data-rozetka="50" value="1"><span>Установка розеток</span> <input class="rozetka-cell" type="number" min="0" name="rozetka-cell" id="" value=""><br> <input class="input__check" type="checkbox" name="lystra" id="" data-check="200"><span>Установка люстры</span> </form> <p>Итого: <strong><span id="itogo"></span></strong></p><br>

    • What is my mistake? Where in my example does this "wrong" work? - Gregory
    • @ Gregory $('input:checkbox:checked').each(function () { - Igor
    • But do not tell me more, why when changing the number it happens that it does not instantly recount? This features js what? - Gregory
    • one
      @ Gregory These are the features of <input type="number" ... in different browsers. - Igor