Button to check / uncheck checkboxes group

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/button-checkboxes": "..."
    }
  }
</script>
<script type="module">
  import buttonCheckboxes from '@w0s/button-checkboxes';

  buttonCheckboxes(document.querySelectorAll('.js-button-checkboxes')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
</script>

<button type="button" class="js-button-checkboxes"
  data-course="check"
  data-control="checkbox-group"
>Check all</button>
<p id="checkbox-group">
  <label><input type="checkbox" /> 1</label>
  <label><input type="checkbox" /> 2</label>
  <label><input type="checkbox" /> 3</label>
</p>

<button type="button" class="js-button-checkboxes"
  data-course="check"
  data-controls-class="checkbox"
>Check all</button>
<p>
  <label><input type="checkbox" class="checkbox" /> 1</label>
  <label><input type="checkbox" class="checkbox" /> 2</label>
  <label><input type="checkbox" class="checkbox" /> 3</label>
</p>

<button type="button" class="js-button-checkboxes"
  data-course="check"
  data-controls-name="checkbox[]"
>Check all</button>
<p>
  <label><input type="checkbox" name="checkbox[]" /> 1</label>
  <label><input type="checkbox" name="checkbox[]" /> 2</label>
  <label><input type="checkbox" name="checkbox[]" /> 3</label>
</p>

HTML attributes