Good day.

There is a calculator that summarizes checkboxes. Code can be found here .

Task: There are two blocks. It is necessary in each of them to combine the checkboxes into a group and give them one price. Roughly speaking, a block is a package of services. The person in this block chooses 1.2 or 3 points (checkbox), but still pays one amount. The same with the second block. And then these blocks are summarized. But there is a clarification that there will be block-packages and separate checkboxes with their price, as in the working example. Approximate code here .

But I'll never know how to implement it.

Thank you in advance for your response.

    2 answers 2

    A word of advice: it is better to place such volumetric texts elsewhere.

    In this case, jsFiddle is perfect. There you can not only show the code, but also immediately see how it works.

    Those. there you can do two projects (without registration): the first is with what is now, the second is with what should be (approximately).

    Or, alternatively, make a screenshot of what is, do a drawing of what should, and post it here. What is now - additionally put on jsFiddle.

    Update

    That's already better) Immediately clear what you want. Are you pure JS interested? Or an example on jQuery can be given?

    Only a small clarification: if I selected the first checkbox in the first block, then the second, then the amount will not change? After all, I have already changed it when I clicked on the first checkbox. Moreover, if you select an element from the second group, the amount will change. All right

    Update

    Look, in this form you are satisfied with the solution: jsFiddle . The decision is still necessary to cut and saw, but for a start, I think it will go)

    • Exactly. Roughly speaking, a block is a package of services. The person in this block chooses 1.2 or 3 points (checkbox), but still pays one amount. The same with the second block. And then these blocks are summarized. But there is a clarification that there will be block-packages and separate checkboxes with their price, as in the working example. JS or jQuery is not important. I try to teach both, but the second for some reason seems easier. - alegraft
    • Thank you, everything works fine. I also thought in the direction of onckick, but with JS on you, I could not combine the calculator and checkboxes. Question: why did you not write the answer in the "Answer"? - alegraft

    @alegraft , I understand that this is your continuing epic with checkboxes)) And why are you stubbornly crawling to the wretched code? The event handler inside the tags is not gud! If something needs to be stored in the tags of elements, then it is better to do this with the help of the data- * attribute. If you take the code from your previous question, you can modify it like this .

    <div class="block"> <p><input type="checkbox" class="main">00</p> <input type="checkbox" data-price="100">01 <input type="checkbox" data-price="150">02 <input type="checkbox" data-price="180">03 </div> <div class="block"> <p><input type="checkbox" class="main">00</p> <input type="checkbox" data-price="250">01 <input type="checkbox" data-price="55">02 <input type="checkbox" data-price="75">03 </div> <output></output>

    Js

     var allChbx = [], out = document.querySelector('output'); [].forEach.call(document.querySelectorAll('.block'), function(group){ var main = group.querySelector('.main'), chbx = group.querySelectorAll('input[type=checkbox]:not(.main)'); allChbx = allChbx.concat([].slice.call(chbx)); main.addEventListener('change', function(){ var stat = this.checked; [].forEach.call(chbx, function(el){ el.checked = stat; }); reCalc(); }); [].forEach.call(chbx, function(el){ el.addEventListener('change',function(){ var cnt = [].filter.call(chbx, function(el){ return el.checked == true; }).length; main.checked = cnt > 0; reCalc(); }, false); }); }); function reCalc(){ var total = 0; allChbx.forEach(function(c){ total += c.checked == true ? +c.dataset.price : 0; }); out.innerHTML = 'Итого: <b>' + total + '</b> тугриков'; }

    It will be more pleasant to work when “flies separately, and cutlets separately”. Let JS be in your file and do not need to mix it with HTML. The same goes for CSS.

    • I don’t argue about flies and cutlets, and I’m doing it with html and css. With JS, so far only with a textbook somehow. And when it is in the tag, it is purely visually easier to figure out what, how and why it works. In the future, of course, I will grow in this regard. And thank you for your option. - alegraft