본문 바로가기

[개발] 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.
JQuery, find()로 특정 태그 찾기, not()으로 특정 태그 제외하기 jQuery find() : 특정 태그 찾는 방법. $(selectorA).find(selectorB); HTML 페이지 소스 --> 찾으려는 대상 예1) beer라는 name을 가진 요소를 찾고 싶은 경우. var targetObj = $("#menuList").find("input[name='beer']"); 예2) id로 찾고 싶은 경우. var targetObj = $("#menuList").find("#beer"); jQuery not() : 특정 태그는 제외하고 찾는 방법. $(selectorA).find(selectorB).not(selectorC); HTML 페이지 소스 --> 찾으려는 대상 예) 특정 ul 밑에 li 를 찾되 burger라는 id를 가진 태그는 제외하고 싶은 경우. var.. 2018. 10. 29.
each(), for문과 유사한 JQuery loop 함수 JQuery에서 제공하는 each()를 이용하면 loop 효과, 즉 for문 처럼 사용할 수 있다. 기본적으로 아래와 같은 형태이다. .each( function(index, Element) ); Element에는 루프를 돌때 마다 작업을 수행하고 싶을 때 function를 정의 해주면 된다. 아래 예시에서는 function을 추가하여 div 개수 만큼 function이 수행되어 alert이 세번 뜬다. first second third 자바스크립트 배열에 사용하고 싶은 경우 아래 예시 참고 var jsArray = ["first", "second", "third"]; $.each(jsArray, function(index){ alert(index +" 번째 루프."); }); JQuery docemnt.. 2018. 10. 29.
JQuery 함수 trigger(), 강제로 click 이벤트 발생시키기 강제로 이벤트를 실행시키기 위해서는 JQuery .trigger() 라는 함수를 사용한다. .trigger( eventType [, extraParameters ] ) 아래 예시에서 btn 이라는 id를 갖는 요소에 강제로 클릭 이벤트를 발생시킨다. $(document).ready(function(){ // trigger로 인해 실행되는 부분 $("#btn").bind("click", function(){ alert("클릭!"); }); // 강제로 클릭 이벤트 발생시키는 부분! $("#btn").trigger("click"); }); 클릭 안 해도 됨. 로딩이 완료되는 데로 div를 클릭하지 않아도 trigger로 이벤트를 발생시키기 때문에 "클릭!" 이라는 alert가 뜬다. 클릭 외에도 원하는 이벤.. 2018. 10. 29.

티스토리툴바