라디오버튼 check속성

라디오버튼의 선택을 변경할 때 생겼던 일이다.

버튼을 눌러서 라디오버튼을 추가하는 간단한 작업을 진행했는데

분명 페이지의 소스상에서 radio버튼 속성에 checked가 있음에도 불구하고 라디오버튼은 선택되지않은 채 추가되는 상황이 반복되었다.

​

그 이유는 기존 checked가 기본적으로 붙어있는 라디오버튼을 복사하여 이름만 바꿔 붙여넣는 상황때문에 발생하였다.

​

왜인지는 정확히 모르겠지만 check 속성이 들어가있는 상태에서 태그를 복사하여 javascript로 html에 추가하게 되면 화면에서는 선택이 안된 상태로 라디오가 추가 되는 것이였다.

var row = $('.row_perform').last().clone();
$(row).find("input:radio[name*='file_"+cnt+"']:input[value='a']").attr("checked",false);
$('.parent_perform').last().append(row);
$(row).find("input:radio[name*='file_"+cnt+"']:input[value='a']").prop("checked",true);

 

append 이전에 라디오 속성에 checked 를 true 로 해주어도 반영이 되지않는다위처럼 이미 존재하는 check를 없앤 후

append 이후에 prop로 라디오 check 속성을 true 로 바꿔주었다.

 

추가로 jquery를 사용할 때 attr과 prop는 다르다. 버전이 업데이트되면서 속성 변경법이 바뀌었다.

참고

https://m.blog.naver.com/deersoul6662/221787796534

prop(), attr()의 차이

 

위 블로그를 정리하자면​

.attr()을 통해서는 element가 가지는 속성값이나 정보를 조회(style, src, rowspan 등)하거나 세팅하는 형식,

​

.prop()을 통해서는 element가 가지는 실제적인 상태(활성화, 체크, 선택여부 등)를 제어하는 업무

​