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
  • а так вразброс должно быть ? 21 июл 2019 в 16:16
  • не понял вопроса, уточните)
    – meine
    21 июл 2019 в 16:33
  • к примеру если тыкнуть на первый checkbox то вылазиет 1 а если тыкнуть на пятый то вылазиет 2 21 июл 2019 в 16:40
  • дак это счетчик)
    – meine
    21 июл 2019 в 18:00
  • ааа .. понял - сорри 21 июл 2019 в 18:02
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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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