如何使用JavaScript实现全选和反选功能

以下是一个例子：

HTML:

<label>全选<input type="checkbox" id="check-all"></label>
<label>反选<input type="checkbox" id="check-reverse"></label>
<br><br>
<label><input type="checkbox" class="checkbox" value="1">选项1</label>
<label><input type="checkbox" class="checkbox" value="2">选项2</label>
<label><input type="checkbox" class="checkbox" value="3">选项3</label>

JavaScript:

const checkAll = document.getElementById('check-all')
const checkReverse = document.getElementById('check-reverse')
const checkboxes = document.querySelectorAll('.checkbox')

checkAll.addEventListener('change', e => {
  checkboxes.forEach(item => {
    item.checked = e.target.checked
  })
})

checkReverse.addEventListener('change', e => {
  checkboxes.forEach(item => {
    item.checked = !item.checked
  })
})

当全选按钮被选中时，将所有的选项都选中；当反选按钮被选中时，将所有选中的选项取消选中，所有未选中的选项选中。