[Solved] Pure JavaScript toggle for select / deselect all checkboxes [duplicate]

by


OK, if you want to do a direct conversion you’d want something a little like this.

document.querySelector('.checkAll').addEventListener('click', e => {
  if (e.target.value == 'Check All') {
    document.querySelectorAll('.container-bikes input').forEach(checkbox => {
      checkbox.checked = true;
    });
    e.target.value="Uncheck All";
  } else {
    document.querySelectorAll('.container-bikes input').forEach(checkbox => {
      checkbox.checked = false;
    });
    e.target.value="Check All";
  }
});
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>

<input class="checkAll" type="button" value="Check All">

<div class="container-bikes">
  <input class="first" id="Item 1" name="option1" type="checkbox">
  <label class="label1" for="Item 1">Item 1</label>
  <input class="first" id="Item 2" name="option1" type="checkbox">
  <label class="label1" for="Item 2">Item 2</label>
  <input class="first" id="Item 3" name="option1" type="checkbox">
  <label class="label1" for="Item 3">Item 3</label>
  <input class="first" id="Item 4" name="option1" type="checkbox">
  <label class="label1" for="Item 4">Item 4</label>
</div>

I’ve changed each JQuery only bit over to its pure counterpart.

2

solved Pure JavaScript toggle for select / deselect all checkboxes [duplicate]