React实现全选和反选的按钮

做一个全选和反选的按钮吧

对于全选，想实现的效果是：

  1、全选按钮是选中时，所有选项都被选中

  2、全选按钮是未选中时：所有按钮都设置未选中

 3、当所有按钮被选中时，全选按钮自动勾选

 4、当有按钮没被选中，则全选按钮设置未选中

对于反选，想实现的效果是：

   反选按钮选中时，所有按钮设置相反状态

实现的代码：

export default function Test() {

  // 选择全选的监听函数：
  let change=(el)=>{
    // 全选按钮是选中的话：把所有按钮都设置选中
    if(el.target.checked == true){
      let arr = document.querySelectorAll('.check')
      arr.forEach((item)=>{
        item.checked = true;
      })
    }
    // 全选按钮是未选中的话：把所有按钮都设置未选中
    if(el.target.checked == false){
      let arr = document.querySelectorAll('.check')
      arr.forEach((item)=>{
        item.checked = false;
      )
    }
  }

  // 选择反选的监听函数：
  let change2=(el)=>{
    // 获取所有按钮，循环取反.....
    let arr = document.querySelectorAll('.check')
    arr.forEach((item)=>{
      item.checked = !item.checked;
    })
  }

  // 选择每一个选项的监听函数：
  let judge =()=>{
    let arr = document.querySelectorAll('.check')
    // 将类数组转成数组，才能使用every方法：
    arr = Array.from(arr)

    // every方法：所有的按钮都为选中时返回true
    let judge = arr.every((item)=>{
      if(item.checked===true) return true
    })
    
    // 当判断为true的时候，将全选按钮也给选上，否则是未选中状态：
    if(judge===true) document.querySelector('.allcheck').checked=true;
    else document.querySelector('.allcheck').checked=false;
  }

  return (
    <>
      <input type="checkbox" value='1' className={'allcheck'} onInput={change}/>全 <br/>
      <input type="checkbox" value='1' className={'fancheck'} onInput={change2}/>反 <br/>
      <input type="checkbox" value='1' className={`check`} onInput={judge}/>1 <br/>
      <input type="checkbox" value='1' className={`check`} onInput={judge}/>2 <br/>
      <input type="checkbox" value='1' className={`check`} onInput={judge}/>3 <br/>
      <input type="checkbox" value='1' className={`check`} onInput={judge}/>4 <br/>
      <input type="checkbox" value='1' className={`check`} onInput={judge}/>5 <br/>
    </>
  )
}