Dashboard > Template Node > Table has rows with checkboxes. Example of a "CheckAll"

[twack]

Hi folks,

I have a table in a UI Template Node that contains a list of items. The list is long so I would really like to implement "Check All / Uncheck All" functionality using a checkbox contained within the header row. Does anyone have an example?

TIA

[UnborN]

<div>
  <input type="checkbox" onClick="toggle(this)">Toggle All</input><br>

  <input type="checkbox" name="checkbox" value="bar1">Bar 1</input><br>
  <input type="checkbox" name="checkbox" value="bar2">Bar 2</input><br>
  <input type="checkbox" name="checkbox" value="bar3">Bar 3</input><br>
  <input type="checkbox" name="checkbox" value="bar4">Bar 4</input><br>
</div>

<script language="JavaScript">
  function toggle(source) {
  let checkboxes = document.getElementsByName('checkbox');
  checkboxes.forEach( el => {
          el.checked = source.checked;
  } )
}
</script>

Explanation :

1. we trigger the toggle function with onClick event
2. passing in the function this .. which in this case is the checkbox Toggle All
3. we get all the checkboxes
4. we loop through them with forEach and set each elements check state
   to the state of of the Toggle All element.