javascript 에서, checkbox 나 radio를 jquery 로 다룰 때, is() + attr() 대신 prop() 를 이용하자.

제목 그대로임.

이게 아마도... jquery version 1.7 이후에 바뀐 거 같은데...

이전에 html 의 checkbox 나 radio 를 jquery 로 다루려면 , attr() 속성이나 is() 속성을 이용했다.

예를 들어,

<input type="checkbox" id="check1" >

를 , jquery 로 반전시킨다면, 아마 이렇게 할 거다.

$('#check1').attr('checked', !$('#check1').is( ':checked' ) );

즉, is() 로 체크되었는지 확인한 후, ! 로 반전해서, attr() 로 등록. ( is("<b><span style="color: rgb(255, 0, 0);">:</span></b>checked" ) 에 콜론이 들어가 있는것에 주의. )

그런데, 이게 라이브러리가 올라가면서, attr() 의 기능이 약간 바뀐 듯 하다.

버전 업 된 jquery 에서는, attr('checked', true ) 를 하면 attr() 함수 본연의 기능대로, Html Node 에 "checked" 라는 속성을 추가해 버린다. 즉, 

<input type="checkbox" id="check1" checked=true >

이게, 브라우저마다 다르긴 하지만, htmml 이 parsing 된 다음에는 체크 박스가 변경되지는 않는다는 점.

뭐, 그게 중요한 건 아니고....

해당 목적을 위해 prop() 라는 함수가 만들어졌으므로, 그냥 그거 쓰자. 

$('#check1').attr('checked', !$('#check1').is( ':checked' ) );

->

$('#check1').prop('checked', !$('#check1').prop( 'checked' ) );        // checked 앞에 콜론(:) 이 없는 것에 주의

만약 jquery lib 를 오랜만에(?) 업글했는데, 업글하고 났더니 check, radio box 등이 생각대로 돌아가지 않으면, 위의 내용을 의심해 볼 것.

[ 누가 만든건지, 잘 그렸네 ]