본문 바로가기

[개발] Programming197

[JQuery] 체크박스 개수와 체크된 체크박스 개수 구하는 방법 JQuery 체크박스 예제 HTML 소스 1 2 3 4 5 6 7 뭐 먹을래? 햄벅 감튀 술 cs 위 예제 소스가 로딩되면 화면에서는 체크 박스 세개가 보이고 그 중 2개는 체크된 상태로 나온다. (핸벽, 술은 체크박스에 체크가 되어 있는 상태) 01 전체 체크박스 개수 구하기 체크박스 개수를 모두 구한다. 결과는 3 1 $("input:checkbox[name=menu]").length; // 결과 3 cs 02 체크된 체크박스 개수 구하기 모든 체크박스 중 체크된 개수만 구한다. 결과는 2개 1 $("input:checkbox[name=menu]:checked").length; // 결과 2 cs 03 체크박스 별로 체크 여부 검사 체크박스의 체크 여부를 검사하여 특정 명령을 실행하고 싶은 경우. 아.. 2018. 10. 29.
JQuery 클릭 이벤트 on("click") 과 click() 의 차이 JQuery on("click")과 click() on("click") 과 click() 의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다. on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다. 아래 예제 소스로 차이점을 알아보자. Coding Answering Getting Paid jQuery click() 이벤트 위 예제 소스에서 아무 li 태그나 클릭하면 아래 함수가 실행된다. $('#myTask').children().click(function () { $(this).remove(); }); 그러면 클릭한 li 태그에 바인딩된 click 이벤트가 실행되어 해당 li 태그가 remove() 될 것이다. 여기서 아래 소스 처럼 동적으로 새로운 .. 2018. 10. 29.
JQuery addClass/removeClass 함수로 class 추가, 제거 하기 클래스 추가하는 함수 $(this).removeClass( "클래스명" ) ; 클래스 제거하는 함수 $(this).addClass( "클래스명" ) ; removeClass()로 클래스 제거 예시 페이지 소스 클릭 JQuery 소스 $("#removeClassBtn").on("click", function(){ // 클릭하면 damm 이라는 클래스가 사라진다. $(this).removeClass( "damm" ); )}; 결과 페이지 소스 클릭 2018. 10. 29.
JQuery, 여러 개의 checkbox 중 checked 된 checkbox 찾기 여러 개의 checkbox 중 원하는 checkbox가 체크 되어 있는지 검사하는 방법이다. 아래 소스에 대해 설명하면, 버튼 명 '주문'을 클릭하면 체크 여부를 검사하는 함수가 실행된다. 페이지 HTML 소스 burger rice beer kimchi 주문 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(!$(t.. 2018. 10. 29.
JQuery, 특정 레이어 밖을 클릭할 경우 열려 있는 레이어 또는 팝업 닫기 레이어를 띄운 상태에서 레이어 밖을 클릭할 경우 레이어 닫는 방법! '예'에서 만약 id가 "layerid"인 div의 밖을 클릭할 경우 container.has(e.target).length는 0이 리턴 되고 container.hide();를 통해 열려 있는 레이어는 닫히게 된다. JQuery 소스 $(document).mouseup(function (e){ var container = $("#layerid") if(container.has(e.target).length == 0){ container.hide(); } }); 페이지 소스 레이어 화면 아무곳을 클릭해도 함수를 실행시키기 위해 mouseup()을 사용했다. 다른 방법으로는 마우스가 레이어를 떠날 때 닫고 싶으면 mouseup 대신 mous.. 2018. 10. 29.
JQuery, class 내 특정 하위 class만 지정하는 방법 동일한 class 명이 같은 페이지 내에 존재할 때, 특정 class 하위에 종속된 class를 찾고 싶은 경우 아래 처럼 class를 top down 순으로 지정하면 특정 class를 찾을 수 있다. JQuery 소스 var classObj = $(".BurgerKung .burger"); 페이지 소스 --> 여러 burger class 중 이것만 찾고 싶을 때 2018. 10. 29.

티스토리툴바