여러 개의 checkbox 중 원하는 checkbox가 체크 되어 있는지 검사하는 방법이다.
아래 소스에 대해 설명하면, 버튼 명 '주문'을 클릭하면 체크 여부를 검사하는 함수가 실행된다.
페이지 HTML 소스
<input type="checkbox" id="burger"/> burger
<input type="checkbox" id="rice" /> rice
<input type="checkbox" id="beer" /> beer
<input type="checkbox" id="kimchi"/> kimchi
<button id="next"> 주문 </button>
JQuery 소스
$("#next").onclick(function(){
// 체크 개수 만큼 루프 돌리기
$(document).find("input:checkbox").each(function(index){
if( $(this).attr("id") == "rice" ||
$(this).attr("id") == "kimchi" ||
$(this).attr("id") == "beer"){
// 모든 체크박스 중 특정 id만 체크여부 검사
if(!$(this).is(":checked")){
alert($(this).attr("id") + "가 체크되어 있습니다.");
return false;
}
}
});
});
위 예제 소스에서 kimchi가 체크되어 있으면
"kimchi가 체크 되어 있습니다!"라고 alert이 발생하게 됩니다.
'[개발] Programming > JQuery' 카테고리의 다른 글
JQuery 클릭 이벤트 on("click") 과 click() 의 차이 (8) | 2018.10.29 |
---|---|
JQuery addClass/removeClass 함수로 class 추가, 제거 하기 (0) | 2018.10.29 |
JQuery, 특정 레이어 밖을 클릭할 경우 열려 있는 레이어 또는 팝업 닫기 (2) | 2018.10.29 |
JQuery, class 내 특정 하위 class만 지정하는 방법 (0) | 2018.10.29 |
JQuery, find()로 특정 태그 찾기, not()으로 특정 태그 제외하기 (0) | 2018.10.29 |
댓글