У меня есть контейнер, который содержит 12 input
с типом checkbox
и я на него повесил событие onchange="jsPlus()"
. В другом блоке счетчик, который отображает кол-во баллов в зависимости от выбранных checkbox
(допустим 1 checkbox
равен 1 баллу). Сделать чтобы счётчик просто увеличивался, у меня проблем не вызывает. Но когда я пытаюсь сделать обратное действие (пользователь снял галочку, соответственно балл нужно отнять) возникают проблемы со счётчиком. Я и через if
пробовал, в итоге пришёл к switch
, но и тут такая же беда.
Подскажите, как лучше реализовать данный алгоритм? Я всю голову сломал, но пока безрезультатно.
var countJS = 0;
function jsPlus() {
var testInp = [];
testInp[0] = document.querySelector('#customCheck1').checked;
testInp[1] = document.querySelector('#customCheck2').checked;
testInp[2] = document.querySelector('#customCheck3').checked;
testInp[3] = document.querySelector('#customCheck4').checked;
testInp[4] = document.querySelector('#customCheck5').checked;
testInp[5] = document.querySelector('#customCheck6').checked;
testInp[6] = document.querySelector('#customCheck7').checked;
testInp[7] = document.querySelector('#customCheck8').checked;
testInp[8] = document.querySelector('#customCheck9').checked;
testInp[9] = document.querySelector('#customCheck10').checked;
testInp[10] = document.querySelector('#customCheck11').checked;
testInp[11] = document.querySelector('#customCheck12').checked;
for (var i = 0; i < testInp.length; i++) {
switch (testInp[i]) {
case true:
{
countJS += 1;
document.querySelector('#arrow').style.transform = 'rotate(' + (-50 + ((countJS * 180) / 100)) + 'deg)';
document.querySelector('#counter').innerHTML = countJS;
};
break;
case false:
{
countJS -= 1;
document.querySelector('#arrow').style.transform = 'rotate(' + (-50 + ((countJS * 180) / 100)) + 'deg)';
document.querySelector('#counter').innerHTML = countJS;
};
break;
}
}
};
<div class="mainCont" onchange="jsPlus()">
<h5 class="skls">Навыки</h5>
<div class="row skills1">
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="html" class="custom-control-input" id="customCheck1">
<label id="labell" class="custom-control-label" for="customCheck1">HTML5</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label id="labell" class="custom-control-label" for="customCheck2">SASS</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label id="labell" class="custom-control-label" for="customCheck3">VANILLAJS</label>
</div>
</div>
<div class="col mr-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label id="labell" class="custom-control-label" for="customCheck4">GIT</label>
</div>
</div>
</div>
<!-- ///////////////////////////////////////////////////////////////////////// -->
<div class="row skills2">
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck5">
<label id="labell" class="custom-control-label" for="customCheck5">CSS3</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck6">
<label id="labell" class="custom-control-label" for="customCheck6">LESS</label>
</div>
</div>
<div class="col mr-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck7">
<label id="labell" class="custom-control-label" for="customCheck7">ANGULAR</label>
</div>
</div>
<div class="col mr-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck8">
<label id="labell" class="custom-control-label" for="customCheck8">FOUNDATION</label>
</div>
</div>
</div>
<!-- ///////////////////////////////////////////////////////////////////////// -->
<div class="row skills3">
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck9">
<label id="labell" class="custom-control-label" for="customCheck9">БЭМ</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck10">
<label id="labell" class="custom-control-label" for="customCheck10">GULP</label>
</div>
</div>
<div class="col mr-1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck11">
<label id="labell" class="custom-control-label" for="customCheck11">JQUERY</label>
</div>
</div>
<div class="col mr-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck12">
<label id="labell" class="custom-control-label" for="customCheck12">BOOTSTRAP</label>
</div>
</div>
</div>
</div>