JSFiddle - React, Tailwind, and code Playground

by AaronWolfsberg

HTML

<div>
<b>250г
<input type="checkbox" name="250г" onclick="Calculator.onSelect(1, 170, this)" />
<b>1000г
<input type="checkbox" name="1000г" onclick="Calculator.onSelect(2, 680, this)" />

<div>
<label>250г <input type="radio" onclick="Calculator.onSelect(2, 680, this);clickRadio(this)" name="radio"  /></label>

<label>1000г <input type="radio" 
onclick="Calculator.onSelect(1, 170, this);clickRadio(this)" name="radio1" /> </label>


<div class="formInputBlock">
<br />
<b> <span id="r" name="sum">0</span> грн.
<div>

JavaScript

function clickRadio(el) {
  var siblings = document.querySelectorAll("input[type='radio'][name='" + el.name + "']");
  for (var i = 0; i < siblings.length; i++) {
    if (siblings[i] != el)
      siblings[i].oldChecked = false;
  }
  if (el.oldChecked)
    el.checked = false;
  el.oldChecked = el.checked;
}



var Calculator = {
    selectedGroups: [],
    sum: 0,

    isGroupSelected: function(groupId) {
        return this.selectedGroups.indexOf(groupId) != -1;
    },

    addSelected: function(groupId, amount) {
        if (!this.isGroupSelected(groupId)) {
            this.changeSum(amount);
        }
        this.selectedGroups.push(groupId);
    },

    removeSelected: function(groupId, amount) {
        if (!this.isGroupSelected(groupId)) {
            return;
        }
        var groupIndex = this.selectedGroups.indexOf(groupId);
        this.selectedGroups.splice(groupIndex, 1);
        if (!this.isGroupSelected(groupId)) {
            this.changeSum(-amount);
        }
    },

    onSelect: function(groupId, amount, elem) {
        if (elem.checked) {
            this.addSelected(groupId, amount);
        } else {
            this.removeSelected(groupId, amount);
        }
    },

    changeSum: function(amount) {
        this.sum += amount;
        this.showSum();
    },

    showSum: function() {
        document.getElementById ('r').innerHTML = this.sum;
    }
    
}