checkbox of dynamic html table code example

Example: dynamic checkbox list in html

const DynamicCheckboxes = {
  checkboxes: document.querySelectorAll('.table td input[type="checkbox"]'),
  selectAllTarget: document.querySelector('.js-select-all'),
  clearBtn: document.querySelector('.js-clear'),

  initialize() {
    this.shiftToSelect();
    this.selectAll();
    this.clearChecked();
    this.showRemoveCheckedButton();
  },

  shiftToSelect() {
    const checkboxes = this.checkboxes;
    let lastChecked;

    function handleCheck(event) {
      // Check if shift key is down and check if checkbox is checked
      let inBetween = false;
      if (event.shiftKey && this.checked) {
        checkboxes.forEach(checkbox => {
          if (checkbox === this || checkbox === lastChecked) {
            inBetween = !inBetween;
          }

          if (inBetween) {
            checkbox.checked = true;
          }
        });
      }
      lastChecked = this;
    }


    checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck, false));
  },

  selectAll() {
    function handleSelectAll(event) {
      this.checkboxes.forEach(checkbox => {
        checkbox.checked ? (checkbox.checked = false) : (checkbox.checked = true)
      })
    }

    this.selectAllTarget.addEventListener('click', handleSelectAll.bind(this), false)
  },

  showRemoveCheckedButton() {
    this.clearBtnDisplay('none')
    document.addEventListener('change', this.showBtn.bind(this))
  },

  showBtn(event) {
    const checkboxesChecked = document.querySelectorAll('.table td input[type=checkbox]:checked').length

    if (checkboxesChecked > 0) {
      this.clearBtn.querySelector('span').textContent = checkboxesChecked;
      this.clearBtnDisplay('block');
    } else {
      this.clearBtn.querySelector('span').textContent = '';
      this.clearBtnDisplay('none');
    }
  },

  clearBtnDisplay(state) {
    this.clearBtn.style.display = state;
  },

  clearChecked() {
    this.clearBtn.addEventListener('click', removeChecked.bind(this), false);

    function removeChecked() {
      this.checkboxes.forEach(checkbox => (checkbox.checked = false));
      this.selectAllTarget.checked = false;
      this.clearBtnDisplay('none');
    }
  }

};

DynamicCheckboxes.initialize();