"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()
})
};
},
"disabling": function() {
if (!this.disable) {
this.disable = true;
this.el.disabled = true;
this.deactivation();
} else {
this.disable = false;
this.el.disabled = false;
}
}
};
o["children"] = (o.hasChildren) ? children.map(function(item) {
return initChekbox(item, o, [], o["target"].id)
}) : false;
return o
};
// получение свойств объекта
var getPropertyObject = function(o, exclude) {
var i = [],
exclude = exclude | "";
for (var prop in o) {
if (o.hasOwnProperty(prop)) {
i.push(o[prop])
};
}
return i
}
// выбор чекбокса (первый клик)
var activateCheck = function(checkbox) {
if (cboxes.hasOwnProperty(checkbox)) {
if (cboxes[checkbox].disableWhenActive) {
cboxes[checkbox].disableWhenActive.forEach(function(item) {
if (item != cboxes[checkbox]) {
item.disabling()
}
})
}
cboxes[checkbox].activation();
};
};
// снятие выбора (второй клик)
var deactivateCheck = function(checkbox) {
if (cboxes.hasOwnProperty(checkbox)) {
cboxes[checkbox].deactivation();
if (cboxes[checkbox].disableWhenActive) {
cboxes[checkbox].disableWhenActive.forEach(function(item) {
if (item != cboxes[checkbox]) {
item.disabling()
}
})
}
};
};
// проверка на выбор
var isCheckActivated = function(checkbox) {
return (cboxes.hasOwnProperty(checkbox)) ? cboxes[checkbox].active : document.getElementById(checkbox).getAttribute("checked");
};
// инициализация всех чекбоксов
var cboxes = {
"cbox1": initChekbox("cbox1", undefined, ["cbox11", "cbox12", "cbox13"], "sum1"),
"cbox2": initChekbox("cbox2", undefined, ["cbox21", "cbox22", "cbox23"], "sum2"),
"cbox3": initChekbox("cbox3", undefined, ["cbox31", "cbox32"], "sum2"),
"cbox4": initChekbox("cbox4", undefined, [], "sum1", "set"),
"cbox5": initChekbox("cbox5", undefined, [], "sum2", "set"),
};
// добавление дополнительных параметров
// children cbox1
cboxes["cbox11"] = cboxes.cbox1.children[0];
cboxes["cbox12"] = cboxes.cbox1.children[1];
cboxes["cbox13"] = cboxes.cbox1.children[2];
// children cbox2
cboxes["cbox21"] = cboxes.cbox2.children[0];
cboxes["cbox22"] = cboxes.cbox2.children[1];
cboxes["cbox23"] = cboxes.cbox2.children[2];
// children cbox3
cboxes["cbox31"] = cboxes.cbox3.children[0];
cboxes["cbox32"] = cboxes.cbox3.children[1];
// custom event checkbox
cboxes["cbox5"].disableWhenActive = getPropertyObject(cboxes);
cboxes["cbox4"].disableWhenActive = getPropertyObject(cboxes);
// обработчик события для чекбоксов
jQuery("#chekboxes").on('click', 'input', function(e) {
if (!e.target.disabled) {
var targetId = e.target.id;
(!isCheckActivated(targetId)) ? activateCheck(targetId): deactivateCheck(targetId);
}
})
<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>
<span class="label">cbox23</span>
</label>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label for="cbox3">
<input class="checkbox" type="checkbox" id="cbox3" value="0">
<span class="checkbox-custom"></span>
<span class="label">cbox3</span>
</label>
<label for="cbox31">
<input class="checkbox" type="checkbox" id="cbox31" value="5000">
<span class="checkbox-custom"></span>
<span class="label">cbox31</span>
</label>
<label for="cbox32">
<input class="checkbox" type="checkbox" id="cbox32" value="15000">
<span class="checkbox-custom"></span>
<span class="label">cbox32</span>
</label>
</div>
<div class="col-xs-6">
<label for="cbox4">
<input class="checkbox" type="checkbox" id="cbox4" value="200000">
<span class="checkbox-custom"></span>
<span class="label">cbox4</span>
</label>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<label for="cbox5">
<input class="checkbox" type="checkbox" id="cbox5" value="15000">
<span class="checkbox-custom"></span>
<span class="label">cbox5</span>
</label>
</div>
<div class="col-xs-6 col-xs-offset-1">
<p>Итого от <span id="sum1">0</span>
<i class="fa fa-rub" aria-hidden="true"></i></p>
<p>В месяц от <span id="sum2">0</span>
<i class="fa fa-rub" aria-hidden="true"></i></p>
</div>
</div>
</div>
#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;
}
External resources loaded into this fiddle: