0

У меня есть контейнер, который содержит 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>

3 ответа 3

1

если у каждого checkbox'a будет какой-то свой счетчик, то можно указать его в data-* аттрибуте, потом при клике считывать этот data-* аттрибут и передавать в decrease || increase

const COUNTER_STEP = 1;

class Checkbox {
  constructor(node) {
    this.node = node;

    if (!this.node) return;

    this.counter = 0;

    this.onClick = this.onClick.bind(this);

    this.node.addEventListener('click', this.onClick, false);
  }

  onClick(e) {
    const checkbox = e.target.closest('input[type="checkbox"]');

    if (!checkbox) return;

    this.isChecked(checkbox) ? this.decrease() : this.increase();
  }

  isChecked(checkbox) {
    return !checkbox.checked;
  }

  increase() {
    this.counter += COUNTER_STEP;
    console.log(this.counter);
  }

  decrease() {
    this.counter -= COUNTER_STEP;
    console.log(this.counter);
  }
}

new Checkbox(document.querySelector('.container'));
<div class="container">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</div>

5
1

Мне кажется лучше всего это сделать как-то так, при помощи селекторов:

document.querySelectorAll('input[type=checkbox]').forEach(cb => {
  cb.addEventListener('change', e => {
    console.log(document.querySelectorAll('input[type=checkbox]:checked').length);
  })
});
<div class="container">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</div>

1

Написал на Jquery — элегантнее.

// Выбираем все чекбоксы и вешаем событие клик мышки
$('input[type="checkbox"]').on('click', () => {
  // кликнув на любом — выбираем все отмеченные
  const elem = $('input[type="checkbox"]:checked');
  // Выводи в консоль их количество(отмеченных)
  console.log(elem.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</div>

Ваш пример:

// Выбираем все чекбоксы и вешаем событие клик мышки
$('input[type="checkbox"]').on('click', () => {
  // кликнув на любом — выбираем все отмеченные
  const elem = $('input[type="checkbox"]:checked');
  // Выводи в консоль их количество(отмеченных)
  console.log(elem.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainCont">
        <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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.