리액트 체크박스 전체선택 해제 약관동의 체크박스

체크박스 전체선택과 일부 선택하면 해제 되는 스크립트는 의외로 꽤 많은 곳에서 사용 되어 진다. 회원가입 약관동의가 대표적이고 리스트중 하나 하나 선택하는 체크박스에도 사용 된다.

  const [checkboxes, setCheckboxes] = useState({
    option1: false,
    option2: false,
    option3: false,
  });

  // 전체 체크박스가 변경되었을 때 나머지 체크박스들을 모두 체크하거나 해제
  const handleAllCheckboxChange = (event) => {
    const isChecked = event.target.checked;
    setAllChecked(isChecked);
    setCheckboxes({
      option1: isChecked,
      option2: isChecked,
      option3: isChecked,
    });
  };
  
  // 개별 체크박스가 변경되었을 때 상태 업데이트 및 전체 체크 상태 업데이트
  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;
    setCheckboxes((prevCheckboxes) => {
      const updatedCheckboxes = {
        ...prevCheckboxes,
        [name]: checked,
      };
      // 개별 체크박스가 모두 체크된 경우 전체 체크박스를 true로 설정
      const allCheckedStatus = Object.values(updatedCheckboxes).every(Boolean);
      setAllChecked(allCheckedStatus);
      return updatedCheckboxes;
    });
  };

 

선언 부분과 실제 태그를 아래에 메모해 본다. 

<article className="all">
    <input
      type="checkbox"
      className="com_chk"
      id="all"
      checked={allChecked}
      onChange={handleAllCheckboxChange}
    />
    <label htmlFor="all">전체동의 </label>
  </article>
  <ul className="list">
    <li className="item">
      <div>
        <input
          type="checkbox"
          className="com_chk"
          id="agree01"
          name="option1"
          checked={checkboxes.option1}
          onChange={handleCheckboxChange}
        />
        <label htmlFor="agree01">
          전자금융거래 기본약관{' '}
          <span className="txt_required">(필수)</span>
        </label>
      </div>
      <button className="com_btn txt">자세히</button>
    </li>
   </ul>