Здравствуйте.
Есть шаблон на Bootstrap 3, в котором реализованы вкладки (tab). Есть три вкладки, в каждой находится форма с JS-калькулятором чекбоксов. Проблема в том, что калькулятор работает в первой вкладке, но не работает в других. В чем может быть проблема?
Скрипт калькулятора подключен перед закрывающим тегом боди.
Скрипт:
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;
document.getElementById('def_sum').value = document.getElementById('r').innerHTML;
}
}
Часть формы
<input type="checkbox" name="option[]" onclick="Calculator.onSelect(1, 10, this)" value="Чекбокс 1" />Чекбокс 1
<input type="checkbox" name="option[]" onclick="Calculator.onSelect(2, 10, this)" value="Чекбокс 2" />Чекбокс 2
<input type="checkbox" name="option[]" onclick="Calculator.onSelect(3, 10, this)" value="Чекбокс 3" />Чекбокс 3
Я так понимаю, что все формы сразу загружаются во всех вкладках в фоне, потому скрипт срабатывает только в первой вкладке. Но как решить эту проблему?
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Использую плагин easyzoomjs для изображений, но требуется он только для ПК, а для моб
Есть скрипт, который при наведении на элемент меню должен менять класс у блока с подкатегориями