관리자 페이지같이 다수의 리스트가 있는 화면을 만들다 보면 경우에 따라 체크 박스를 통해 여러 리스트를 선택 후 해당 리스트들에게 특정 기능을 부여할 때가 있다.체크박스 전체 선택 / 해제 & 개별 선택thead에 있는 체크 박스 선택 시 리스트 전체 체크, 재 선택 시 전체 해제개별 선택 후에도 thead에 있는 체크 박스 선택 시 리스트 전체 체크import { useState } from "react";export default function Test() { const userDatas:any = []; for (var i = 1; i { if (checked) { setCheckItems((prev) => [...prev, id]); } else { setChe..

input 태그의 type이 checkbox이고 여러 개 있을 경우 카테고리 중 하나만 선택이 되어야 할 때가 있다. 자바스크립트를 통해 해결할 수 있다. ⭐ 주요 포인트onclick 시 모든 체크바스를 해제하고 선택 한 체크박스 만 체크되도록 한다.구현 방법하나로 묶을 checkbox는 동일한 name 값을 설정한다.checkOnlyOne(this) : 체크박스를 하나만 선택하도록 하는 함수입니다. 이 함수는 체크박스가 클릭되었을 때 호출된다.const checkboxes = document.getElementsByName("cate") : name 속성이 "cate"인 모든 체크박스를 가져와서 변수 checkboxes에 할당한다.checkboxes.forEach((cb) => { cb.checked ..

프로젝트를 진행하다보면 컨셉에 따라 체크박스의 기본 디자인 대신에 다른 디자인으로 변경해야 하는 경우가 있다. 그래서 input태그의 checkbox를 커스텀하는 방법에 대해 정리해보았다. ⭐ 주요 포인트input 태그의 id, 와 label태그의 for 에 같은 값을 할당해야 label 클릭 시 input 체크에 영향이 미친다.checked 속성을 활용하여 체크 전 후 스타일링을 다르게 줄 수 있다.  Html 전체   Css label{ cursor: pointer;}.input_area input[type="checkbox"] { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #0..