Стилизованный калькулятор

with jQuery

by Quncore

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="chekboxes" class="container">
  <div class="row">
    <div class="col-xs-6">
      <label for="cbox1">
        <input class="checkbox" type="checkbox" id="cbox1" value="0">
        <span class="checkbox-custom"></span>
        <span class="label">cbox1</span>
      </label>
      <label for="cbox11">
        <input class="checkbox" type="checkbox" id="cbox11" value="5000">
        <span class="checkbox-custom"></span>
        <span class="label">cbox11</span>
      </label>
      <label for="cbox12">
        <input class="checkbox" type="checkbox" id="cbox12" value="120000">
        <span class="checkbox-custom"></span>
        <span class="label">cbox12</span>
      </label>
      <label for="cbox13">
        <input class="checkbox" type="checkbox" id="cbox13" value="60000">
        <span class="checkbox-custom"></span>
        <span class="label">cbox13</span>
      </label>
    </div>
    <div class="col-xs-6">
      <label for="cbox2">
        <input class="checkbox" type="checkbox" id="cbox2" value="0">
        <span class="checkbox-custom"></span>
        <span class="label">cbox2</span>
      </label>
      <label for="cbox21">
        <input class="checkbox" type="checkbox" id="cbox21" value="20000">
        <span class="checkbox-custom"></span>
        <span class="label">cbox21</span>
      </label>
      <label for="cbox22">
        <input class="checkbox" type="checkbox" id="cbox22" value="35000">
        <span class="checkbox-custom"></span>
        <span class="label">cbox22</span>
      </label>
      <label for="cbox23">
        <input class="checkbox" type="checkbox" id="cbox23" value="30000">
        <span class="checkbox-custom"></span>
    ...

CSS

#chekboxes {
  padding-top: 5px;
}

label {
  display: block;
}

label ~ label {
  padding-left: 15px;
}

.label {
  vertical-align: top;
  padding: 0, 3px, 0, 0;
}

.checkbox {
  display: none;
}

.checkbox-custom {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 3px;
}

.label {
  font-family: GOTHAPROREG;
  font-size: 18px;
  color: #333;
  white-space: pre-wrap;
}

.checkbox:checked + .checkbox-custom::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(http://stud.ashcherbakov.ru/uploads/_pages/43/button_ok_2832.png) no-repeat !important;
  border-radius: 2px;
  width: 14px;
  height: 24px;
}

.checkbox:disabled + .checkbox-custom {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  background: gray;
  border-radius: 3px;
}

JavaScript

"use strict"
var initChekbox = function(id, parent, children, target, expression, disableWhenActive) {
  var o = {
    "el": document.getElementById(id),
    "parent": parent || false,
    "children": [],
    "target": document.getElementById(target),
    "active": false,
    "disable": false,
    "disableWhenActive": disableWhenActive || false,
    "expression": expression || "sum",
    "hasChildren": (children.length > 0) ? true : false,
    "calcRes": function(expression, sum, value) {
      var sum = sum.replace(/\s*/g, '') * 1, // форматируем удаляя лишние пробелы и преобразуем в число
        value = value * 1,
        result = 0;
      switch (expression) {
        case "sum":
          result = sum + value;
          break;
        case "sub":
          result = sum - value;
          break;
        case "reset":
          result = 0;
          break;
        case "set":
          result = value;
          break;
      }
      result = result.toString().replace(/(\d{1,3}(?=(\d{3})+(?:\.\d|\b)))/g, "\$1 "); // форматирование(отделение тысяч пробелом)
      return result
    },
    "activation": function() {
      if (!this["active"]) {
        this["active"] = true;
        this.el.checked = true
      };
      this.target.textContent = this.calcRes(this.expression, this.target.textContent, this.el.getAttribute("value"));
      if (this.hasChildren) {
        this.children.forEach(function(item) {
          if (!item.active) {
            item.activation()
          };
        })
      }
    },
    "deactivation": function() {
      if (this["active"]) {
        this["active"] = false;
        this.el.checked = false
        this.target.textContent = this.calcRes("sub", this.target.textContent, this.el.getAttribute("value"));
      };
      if (this.parent) {
        this.parent["active"] = false;
        this.parent.el.checked = false
      };
      if (this.hasChildren) {
        this.children.forEach(function(item) {
          item.deactivation()
      ...