[jQuery] jQuery에서 .attr()과 .prop()의 차이: checkbox와 radio 체크 문제 해결하기

.attr() 메서드란?

.attr() 메서드는 HTML 요소의 **속성(attribute)**을 설정하거나 가져올 때 사용합니다. 예를 들어, src, href, id와 같은 HTML 속성을 조작할 수 있습니다. 하지만 jQuery 1.6 이후부터 체크박스와 라디오 버튼의 상태는 .attr()으로 조작하기에는 한계가 있습니다.

$(".checkbox").attr("checked", true); // 화면에는 변동 없음

위 코드에서 .attr("checked", true)는 속성만 변경할 뿐, 실제 요소의 상태에는 반영되지 않습니다. 따라서 UI에 변화가 없으며, 단순히 코드에서만 "checked" 속성이 설정된 것처럼 나타납니다.

.prop() 메서드란?

.prop() 메서드는 **DOM 속성(property)**을 변경하는 데 사용됩니다. checkbox와 radio 버튼처럼 UI에서 상태 변화가 필요한 요소에는 .prop()을 사용하여 속성과 상태를 동시에 변경할 수 있습니다. jQuery 1.6 이후에는 주로 사용자의 인터랙션과 관련된 속성을 제어할 때 .prop()을 사용하도록 권장됩니다.

$(".checkbox").prop("checked", true); // 화면에 실제로 체크 표시

위 코드에서 .prop("checked", true)를 사용하면 UI에도 체크가 표시됩니다. 이는 HTML 속성이 아닌 DOM 속성을 변경하므로, 사용자가 인식할 수 있는 상태 변화를 일으킵니다.

왜 .prop()을 사용해야 할까?

체크박스와 라디오 버튼은 HTML 어트리뷰트만 바꾼다고 실제 상태가 변하지 않기 때문입니다. .prop()은 JavaScript 속성을 조작하여, HTML 상태와 화면 상태를 일치시켜줍니다. 따라서 폼 요소의 checked 상태를 변경할 때는 .prop()을 사용하는 것이 더 적합합니다.

예제: .attr() vs .prop()

// .attr() 사용 예시
$(".checkbox").attr("checked", true); // 화면에서는 변동 없음

// .prop() 사용 예시
$(".checkbox").prop("checked", true); // 체크박스에 체크 표시

정리

• .attr(): HTML 속성을 조작할 때 사용합니다. (예: id, class, src 등)
• .prop(): JavaScript 속성을 조작하여 UI 상태를 직접 변경할 때 사용합니다. 체크박스나 라디오 버튼 등과 같이 상태 변화가 필요한 경우에는 .prop()을 사용하는 것이 더 적절합니다.