Category: JQuery

jQuery: IE에서 Radio 버튼 변경시 이벤트 처리 방법

IE는 다른 브라우져와 달리 Radio 버튼상태가 변경됐을 때 바로 change 이벤트를 발생시키지 않고 다른 엘리먼트를 클릭했을 때 change 이벤트를 발생시킨다. 그래서 Radio 버튼 상태의 변화에 따라 어떤 처리를 하려면 IE에서는 click 이벤트를 사용해야 한다.

브라우져에 상관없이 Radio 버튼 상태의 변경을 감지하려면 jQuery에서는 다음의 코드를 사용하면 된다.

[code language=”javascript”]
$(document).ready(function(){
$(".hiddenOnLoad").hide();
$("#viewByOrg, #viewByProduct").bind(($.browser.msie ? "click" : "change"), function () {
$(".visibleOnLoad").show();
$(".hiddenOnLoad").hide();
});
});
[/code]

jQuery에서 select box 의 선택된 값 알아내기

jQuery로 select box의 선택된 값 읽어오기
$(‘#select_box option:selected’).val();

jQuery로 select box의 선택된 내용 읽어오기
$(‘#select_box option:selected’).text();



jQuery: 엘리먼트의 존재여부 체크하기

jQuery에서 특정 엘리먼트의 존재를 체크하기 위해서 먼저 다음 코드를 생각해 볼 수 있다.

if ($("myDiv")) {  
    // 존재하는 경우의 코드는 여기에  
}

하지만 위 코드는 원하는 대로 동작하지 않는다. 왜냐하면 jQuery의 셀렉터는 항상 객체를 반환하기 때문에 언제나 참으로 동작을 하게 된다. 엘리먼트가 존재하지 않은 경우에도 빈 객체를 반환하기 때문에 위 코드로는 존재 여부를 체크할 수 없고, 다음의 코드를 사용해야 한다.

if ($("myDiv").length > 0) {

   // 존재하는 경우의 코드는 여기에

}

length 특성을 사용하면 엘리먼트가 존재하지 않은 경우 0을 반환하기 때문에 존재여부를 제대로 체크할 수 있다.