[React] input checkbox ui 변경하기

input checkbox의 ui를 변경하는 예제를 만들어보았다.

1.먼저 input type checkbox인 default css 값과, check 되었을때 의 css 롤 설정해준다.

background-image를 첨부할 수도 있다.

//css코드
input[type="checkbox"] {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid gainsboro;
  border-radius: 50%;
}
input[type="checkbox"]:checked {
  border-color: transparent;
  background-repeat: no-repeat;
  background-color: limegreen;
}

2.해당 체크박스를 실행할 page에 input type checkbox를 return 값으로 출력하여 확인해보고,

onClick함수의 e.target.checked를 활용하여 다중선택 제어 , checked된 input 만 출력하여 확인하는 코드를 짜보았다.

import React from "react";
import "./Checkbox.css";
const CheckboxUI = () => {
  const onClickCheck = (e) => {
    //1. checkbox 다중선택 되지 x
    // if (e.target.checked) {
    //   let allElem = document.getElementsByClassName("checkboxui");
    //   console.log(allElem, ">allElem");
    //   for (let i = 0; i < allElem.length; i++) {
    //     allElem[i].checked = false;
    //   }
    // }
    // e.target.checked = true;
 
  //2. checkbox 된 input만 출력
    if (e.target.checked) {
      let allElem = document.getElementsByClassName("checkboxui");
      console.log(allElem);
      for (let i = 0; i < allElem.length; i++) {
        if (allElem[i].checked === true) {
          //check된 input type checkbox
          console.log(allElem[i]);
        }
      }
    }
  };
  return (
    <div className="layout ">
      <input
        type="checkbox"
        onClick={onClickCheck}
        className="checkboxui cursorpointer"
      />
      <input
        type="checkbox"
        onClick={onClickCheck}
        className="checkboxui cursorpointer"
      />
      <input
        type="checkbox"
        onClick={onClickCheck}
        className="checkboxui cursorpointer"
      />
      <input
        type="checkbox"
        onClick={onClickCheck}
        className="checkboxui cursorpointer"
      />
    </div>
  );
};

export default CheckboxUI;