Good time. Recently started learning js. Faced with the checkbox problem. Can not get the desired result.

Thus, the items of the calculator look like, this is the user input of the number of units:

<div class="row" data-price="100"> <div class="icon door"></div> <div class="left" data-edit="" contenteditable="true"> <span class="z">Наименование</span> </div> <div class="right"> <span data-edit="" contenteditable="true">кол-во</span> <div class="counter"><span class="minus">—</span><span class="count null">0</span><span class="plus">+</span> </div> </div> </div>

So the script:

 var base = parseInt($('#calculator .wrapper').attr('data-base')); var settings = []; function RemoveAmount(headline) { for(var i=0; i<settings.length; i++) { if(settings[i][0]==headline) { settings[i][1]--; } if(settings[i][1]==0) { settings.splice(i, 1); } } } function AddAmount(headline, amount, price) { var price_int = parseInt(price); var newItem = [headline, amount, price_int]; if(settings.length==0) { settings.push(newItem); } else { var flag = false; var flag_i = 0; for(var i=0; i<settings.length; i++) { if(settings[i][0]==headline) { flag_i = i; flag = true; break; } } if(flag) { settings[flag_i][1]++; } else { settings.push(newItem); } } } function TotalSum(settings_array) { var sum = 0; for(var i=0; i<settings_array.length; i++) { sum += settings_array[i][1]*settings_array[i][2]; } return sum; } /* $('#calculator .wrapper .row').each(function(i, elem) { $(this).find('.right').append('<div class="counter"><span class="minus">−</span><span class="count null">0</span><span class="plus">+</span></div>'); }); */ $("#calculator .minus").on("click", function(e) { e.preventDefault(); var new_value = parseInt($(this).parent().find('.count').text())-1; var headline = $(this).parents('.row').find('.left .z').text(); if(new_value<0) { alert('Количество не может быть отрицательной величиной.'); return false; } else { $(this).parent().find('.count').text(new_value); RemoveAmount(headline); if(settings.length==0) { var result = 0; } else { var result = TotalSum(settings)+base; } result = number_format(result, 0, '.', ' '); $('#CalculatorResult, #CalculatorResultModal').text(result); } if(new_value==0) { $(this).parent().find('.count').addClass('null'); } else { $(this).parent().find('.count').removeClass('null'); } }); $("#calculator .plus").on("click", function(e) { e.preventDefault(); var new_value = parseInt($(this).parent().find('.count').text())+1; $(this).parent().find('.count').text(new_value); $(this).parent().find('.count').removeClass('null'); var headline = $(this).parents('.row').find('.left .z').text(); var price = $(this).parents('.row').attr('data-price'); AddAmount(headline, new_value, price); var result = TotalSum(settings)+base; result = number_format(result, 0, '.', ' '); $('#CalculatorResult, #CalculatorResultModal').text(result); }); function ToFormData(data) { var str = ''; for(var i=0; i<data.length; i++) { str = str+data[i].join(","); if(i!=(data.length-1)) { str = str+'='; } } return str; }

So on the page I do the checkbox:

 <div class="row" data-price="1000"> <div class="icon heating"></div> <div class="left" data-edit="" contenteditable="true"> <span class="z">Чекбокс</span> </div> <div class="right"> <span data-edit="" contenteditable="true">Значение</span> <input type="checkbox" class="checkbox" id="checkbox-1"> <label for="checkbox-1"></label> </div> </div>

It is not at all clear what to register in the script so that it adds the sum of "1000" to the total amount ...

  • one
    you would shorten the code, emphasizing only the non-working time. but not everyone agrees to revise the entire canvas - lexxl
  • I would know where to look, cut. on this provided all that is ... :( - Roman

1 answer 1

First you need to make a change in html

 <input type="checkbox" class="checkbox" id="checkbox-1" value="1000"> <label for="checkbox-1">Плюс 1000</label>

Next, we need to "hang" on the input [type = checkbox] element onchange with the processing we need:

 $('#checkbox-1').on('change', function () { var result; if ($(this).prop('checked')) { result = parseInt(this.value); } result += TotalSum(settings); result = number_format(result, 0, '.', ' '); $('#CalculatorResult, #CalculatorResultModal').text(result); });

For a set checkbox:

 $('input[type=checkbox]').on('change', function () { var result = 0; $('input[type=checkbox]:checked').each(function () { result += parseInt(this.value); }); result += TotalSum(settings); result = number_format(result, 0, '.', ' '); $('#CalculatorResult, #CalculatorResultModal').text(result); });
  • Wow! Thank you so much! Sorry for the reputation I can not put. Have helped. But I have such a function: <div class = "wrapper" data-base = "100"> It adds the sum to the total. In the script, the topmost line: var base = parseInt ($ ('# calculator .wrapper'). Attr ('data-base')); - Roman
  • And now I ran into a problem. checkbox-1 is one of the checkboxes. There are still checkbox-2, etc. I am writing copies in the script with $ replacing ('# checkbox-1') as a result I get not summation but replacing one amount with another :( - Roman
  • I solved the issue with data-base like this: result + = TotalSum (settings) + base; The question remains of the remaining checkboxes and resetting the total amount when removing the checkbox. - Roman
  • Roman, Your problem with checkboxes is purely because of such a bad code structure. Even it is hard for me to understand what's what. Now I will add my answer and rewrite it for a lot of checkboxes - Pleshevskiy
  • I'm still learning :) I would be grateful. third day poking around ... - Roman