CheckBoxes in JavaScript

Various examples of manipulating and testing checkboxes using JavaScript

Select All

Select All
1
2
3
4
5

<input type="checkbox" id="select-all" /> Select All<br>
<input type="checkbox" name="test" value="1" /> 1<br>
<input type="checkbox" name="test" value="2" /> 2<br>
<input type="checkbox" name="test" value="3" /> 3<br>
<input type="checkbox" name="test" value="4" /> 4<br>
<input type="checkbox" name="test" value="5" /> 5
<div class="my-3">
<button class="btn btn-default btn-sm get-values">Get Values</button> 
<button class="btn btn-default btn-sm get-string-values">Get Values as string</button>
<button class="btn btn-default btn-sm get-query-values">Get values as query string</button>
</div>
<textarea id="values" class="form-control"></textarea>
<script>
const selectAll = document.querySelector('input#select-all');
const checkboxes = document.querySelectorAll('input[name="test"]');
selectAll.addEventListener('change', _ => checkboxes.forEach(item => item.checked = selectAll.checked));
const getValues = document.querySelector('.get-values');
const getStringValues = document.querySelector('.get-string-values');
const getQueryValues = document.querySelector('.get-query-values');
const output = document.querySelector('#values');
getValues.addEventListener('click', _ => {
    const selectedValues = [...checkboxes].filter(x => x.checked).map(x => x.value);
    selectedValues.forEach(x => output.value += `${x}\n`);
});
getStringValues.addEventListener('click', _ => output.value = [...checkboxes].filter(x => x.checked).map(x => x.value).join());
getQueryValues.addEventListener('click', _ => output.value = '&orderitem=' + [...checkboxes].filter(x => x.checked).map(x => x.value).join('&orderitem='));
</script>