.attr() vs .prop() 비교 - 셀렉트박스,라디오박스

$("input:radio[name='test_name'][value='type2']").attr('checked',true);

$("input:radio[name='test_name'][value='type2']").prop('checked',true);

필자는 Jquery에서 attr 을 많이 사용 합니다. 라디오 박스를 제어하는데 있어서 attr속성을 이용하는데 최초 한번에 동작만 실행되고 라디오 박스에 대한 액션이 실행되지않았습니다. prop로 해결하게 되었는데, 원인에 대한 궁금증을 해소하고자 구글링을 해봤습니다. 참고

.attr() vs .prop()

우선, 취급하는 정보가 다릅니다. attr() 은 HTML 의 Attribute 를 , prop() 는 JavaScript 의 Property 를 취급합니다. 둘에 차이를 비교하기위해 참고사이트에 적절한 예제가 나와 있습니다.

<a id="example" href="#example" />

여기서 $("#example").attr('href') 과 $("#example).prop('href') 의 결과값은 다르게 나옵니다. attr 의 경우 #example 값이 출력되고 prop 의 경우 http://localhost:333/page#example 형식으로 출력되게 됩니다.

결론적으로 HTML의 속성을 제어할때 attr Javascript의 속성을 취급할때 prop 를 판단하여 사용 하면 될것 같습니다.

jsbin 을 이용해 간단히 테스트 해볼수 있는 코드를 작성했습니다. change 이벤트에 prop를 attr 로 변경하여 console 로그를 확인해보시면 차이점을 확인해 볼수 있습니다.

html

<input type="checkbox" name="test_R" value="1" />
<input type="checkbox" name="test_R" value="2" />
<input type="checkbox" name="test_R" value="3" />
<input type="checkbox" name="test_R" value="4" />
<input type="button" value="click me"id="btnAction" />

javascript

$("input:checkbox[name='test_R']").on('change',function(){
  
  $(this).prop('checked',true);
   
});


$('#btnAction').on('click',function(){
  
var check_R = $("input:checkbox[name='test_R']:checked").val();
  
  console.log(check_R);
  
});