checked가 왜 안 풀려?

 

 

 

요즘 테이블을 만들면서 cloneNode()로 행을 추가하고, 그 안에 있는 input 값들을 초기화해주는 작업을 하고 있었는데 ...

자꾸 체크박스만 요상하게 초기화가 안되는 문제가 발생했당 

 

 

삐용삐용.. 🚨 디버깅 시작!

 

 

 

 

 

체크한 상태에서 행을 추가해보면 

 

input.checked = false;

 

를 했을 때는

 

 

 

겉보기에는 체크가 풀려있지만

F12로 확인했을 때는 checked 속성이 여전히 남아있다 ?!

 

 

 

 

 

 

 

 

🤔 분명히 해제했는데 왜?

 

 

 

 

 

 

하지만 !

 

input.removeAttribute("checked");

 

 

를 했을 때는 

 

 

 

F12로 보면 checked 속성은 사라져있는데

실제로 화면에서는 여전히 체크가 되어있는 상태?

 

 

 

 

 

 

---

 

🧠 결론: 속성(Attribute)과 상태(Property)의 차이

 

 

이 문제의 핵심은 바로 HTML 속성(Attribute) 과 DOM 상태(Property)의 차이에서 발생한다.

구분	.checked = false	.removeAttribute("checked")
조작 대상	Property (상태)	HTML Attribute (초기값)
언제 적용?	실행 중 체크 상태를 바꿈	HTML 초기 상태를 지움
눈에 보이는 상태	✅ 반영됨	❌ 반영 안됨
Elements 탭에서 checked 속성	남아있음	없어짐

 

 

📘 개념 정리

HTML 요소에는 두 가지가 있다:

• Attribute (속성)
  : HTML이 처음 로드될 때 정해진 초기값
  예) <input type="checkbox" checked>
• Property (상태)
  : JavaScript를 통해 실시간으로 조작되는 값

 

<input type="checkbox" checked>

 

이 코드가 처음 로딩되면 브라우저는 input.checked = true로 상태를 설정한다
하지만 이후에 checked 속성을 제거한다고 해서 상태까지 바뀌는 건 아니당

 

 

 

 

 

---

🧪 cloneNode(true)의 함정

 

cloneNode(true)는 요소의 HTML 구조 + 상태까지 모두 복사한다.
즉, 원본에 체크된 상태가 있다면 복제된 요소도 그대로 체크된 상태로 따라온다.

 

그래서 단순히 removeAttribute("checked")만 하거나,
input.checked = false만 해서는 절반만 조작한 셈이 된다.

 

 

 

 

 

따라서 체크를 완전히 해제하고싶을 때는 

.removeAttribute("checked")와 .checked=false를 둘 다 써준당

input.checked = false;
input.removeAttribute("checked");


//jquery를 쓴다면
$(input).prop("checked", false).removeAttr("checked");

 

 

 

 

이런 개념은 checked뿐만 아니라

selected, disabled, readonly 속성에서도 동일하게 적용된다

 

 

속성(Attribute) ≠ 속성 상태(Property)
눈에 보이는 상태는 Property로, 폼 전송에 영향을 주려면 Attribute도 관리하자!