javaScript(jQuery) 에서 checkbox 선택시 attr 와 prop 의 차이는 무엇인가요??

Question

javaScript(jQuery) 에서 checkbox 선택시 attr 와 prop 의 차이는 무엇인가요??

checkbox 의 check 를 true or false 로 변경할때 가장 메이저한 처리법이 무엇인지 궁금합니다.

attr 혹은 prop 모두 사용은 가능하지만 조금씩 차이가 있는것 같네요.

Answer 1

jQuery의 attr() 과 prop() 는 속성을 다룬다는 점에서 같지만 버전 1.6 이 후 용도에 따라 달리 쓰이게 되었습니다.

attr() : HTML 속성의 값을 가져오거나 수정합니다

prop() : Javascript의 프로퍼티 값을 가져오거나 수정합니다

말씀하신 checkbox의 checked 속성을 예로 들면,

<input type='checkbox' id='check01' checked /> <input type='checkbox' id='check02' /> <script> $('#check01').attr('checked') // checked $('#check01').prop('checked') // true $('#check02').attr('checked') // undefined $('#check02').prop('checked') // false </script>

#check01은 HTML상에 속성이 이미 정의가 되어있기때문에 attr('check')를 실행하면 'checked'를 반환합니다.

이 때, Javascript의 프로퍼티 값은 true이며 prop('checked')를 실행하면 true를 반환합니다.

#check02는 HTML상에 속성이 이미 정의되어있지 않기때문에 attr('check')를 실행하면 'undefined'를 반환합니다.

이 때, Javascript의 프로퍼티 값은 false이며 prop('checked')를 실행하면 false를 반환합니다.

jquery API에서도 공식적으로 form 요소의 disabled, selected, checked와 같은 속성값을 확인 또는 변경하는

경우는 .prop()을 사용하는 것을 권장합니다.

Answer 2

안녕하세요.

attr 은 tag의 attribute 와 같은 속성으로 속성 값을 조회, 설정 합니다. (style, src, rowspan 등)

prop 는 property로 속성으로 실제적인 상태 (활성화, 체크, 선택여부 등)를 제어하는 값을 설정합니다.

구체적으로 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected 는 prop를 사용해야 합니다.

// <input type="checkbox" checked="checked' /> 의 checked attribute 가 추가되거나 삭제될 수 있습니다. $('[type=checkbox]').attr('checked', 'checked'); // attr을 사용해도 가능하나 1.6 버전 이상에서는 prop를 사용하는게 좋습니다. $('[type=checkbox]').prop('checked', true);