原生js实现全选和全不选

html部分

<ul>
  <li>全选：<input type='checkbox' id='check-all'></li>
  <li>1 选项 <input type='checkbox' class='check-item'></li>
  <li>2 选项 <input type='checkbox' class='check-item'></li>
  <li>3 选项 <input type='checkbox' class='check-item'></li>
  <li>4 选项 <input type='checkbox' class='check-item'></li>
  <li>5 选项 <input type='checkbox' class='check-item'></li>
  <li>6 选项 <input type='checkbox' class='check-item'></li>
</ul>

javascript

let initCheckBox=(checkAll = document.querySelector('#check-all'), options = Array.from(document.querySelectorAll('.check-item'))) =>{
  checkAll.addEventListener('change', () => options.forEach(x => x.checked = checkAll.checked))
  options.forEach(o => o.addEventListener('change', update => checkAll.checked = options.every(x => x.checked)))
}