반응형 제이쿼리 반응형 20 [Jquery]체크박스 전체선택 및 전체해제 또는 특정선택 제어기능 안녕하세요. 오늘은 체크박스 관련된 제이쿼리를 소개하려합니다. 아래 사진과 같이 전체를 선택하면 전부 선택하는 기능은 화면상으로 복잡할 여지가 있습니다. 해서, 복수로 선택하되, 전체를 눌렀을 경우 모두 해제되고 ‘전체’만 선택될 수 있도록 하는 제이쿼리를 정리해보려 합니다. 번외로 특정선택을 할 수 있는 제어기능도 정리하려 합니다. Jsp 1 2 3 4 5 전체 테스트1 테스트2 테스트3 테스트4 cs 우선 jsp에서는 input type에 체크박스를 넣어 체크박스 형태를 만들어줍니다. 문을 통해서 특정 값일 경우 checked를 할 수 있도록 합니다. Onclick 함수 기능은 아래에서 별도로 소개하겠습니다. Jquery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18.. 2020. 12. 22. [HTML&JQUERY] 이메일 형식 입력하는 방법 & 유효성 검사 (영상 有) 안녕하세요. HTML 과 JQUERY를 이용하여 이메일 형식만 입력할 수 있는 방법과 이에 대한 유효성 검사하는 방법에 대해 알아보겠습니다. 흔히들 많이 사용하는데 할때마다 잃어버려서 따로 정리해보았습니다. 오직 이메일 형식의 숫자 및 영문만 입력됩니다. 아래는 구현된 이메일형식의 영상이며, 이메일형식이 틀리게 입력할 경우 경고 메세지가 나오게 됩니다. HTML INPUT 두개를 만들어 아이디와 도메인이 입력될 수 있도록하고 select박스를 이용하여 도메인 선택란을 만들어줍니다. 그리고 onclick을 이용해서 선택한 도메인이 도메인 input에 입력될 수 있도록 함수를 만들어줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 이메일 * @ -선택- naver.com g.. 2020. 12. 1. [Jquery] a태그 텍스트값 가져오는 방법! 오늘은 a태그의 텍스트값을 제이쿼리로 값을 가져오는 방법을 이야기해보겠습니다. 목적은 html의 a태그에 위치한 텍스트값을 제이쿼리를 통해서 서버(컨트롤러)로 보내기 위함입니다. 이렇게 정리하면 쉬워보이는데…모르면 참 어려운 제이쿼리인 것 같습니다. 우선 form태그안에 변수 kind를 선언합니다. 1 cs 그리고 사용될 a태그에서 onclick으로 함수를 정의합니다. 이때 괄호에 this를 넣어 클릭된 값을 저장할 수 있도록합니다. 1 테스트입니다. cs 그리고 스크립트부분에서 onclick함수를 정의합니다. 이때 괄호에 this의 별칭(ths)를 넣어줍니다. 여기가 가장 중요한 부분입니다! hello 변수안에 this값의 텍스트를 넣어줍니다. $(ths).text(); 그리고 hidden으로 숨겨놓은.. 2020. 11. 24. 게시판 페이지 개수별 검색(selectbox 검색) 페이지에 10개/20개/30개씩 보이도록 설정하는 기능을 간단히 이야기해보겠습니다. 전체 소스를 올리면 너무 양이 많아져서 페이징 기능이 완료되었다는 가정하에 작성하였습니다. 페이징을 완료하였다면 개수별 검색 기능은 jsp에서만 간단히 작성하면 구현할 수 있습니다! 아래는 구현 화면입니다. JSP Onchange 함수를 통해서 자바스크립트로 보냅니다. option값은 c:if문을 사용하여 각각의 값일 경우 선택값이 변하지 않도록 sleected값을 설정합니다. 1 2 3 4 5 6 7 10개씩 보기 20개씩 보기 30개씩 보기 Colored by Color Scripter cs Script Idx 값과 select id에 선언한 값을 각각 변수에 담습니다. 그리고 조건으로 만약에 특정 페이지 값을 선택할.. 2020. 10. 2. 라디오 버튼에 따라 입력칸 보이기/숨기기 특정 라디오 버튼을 눌렀을 때, div값이 보이고 숨겨지는 것을 알아보겠습니다. 우선 저는 div값이 숨겨져 있다가, ‘기타’라는 라디오버튼을 누르면 div값이 나타나는 기능으로 하도록 하겠습니다. 결과화면입니다. 적용 전 적용 후 JSP 특정 버튼인 기타 부분의 ID를 다른 라디오 버튼 ID와 다르게 설정합니다. 그리고 DIV ID 값을 지정해줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 신청 경로 온라인 최초 신청 방문 사후 관리 유관기관 추천 지인소개 기타 Colored by Color Scripter cs JQUERY 라디오에서 ID값이 기타부분인 것을 클릭할 경우 체크값이 있으면 Di.. 2020. 10. 2. 체크박스(checkbox) 클릭 시, 활성화/비활성화 방법 (2021년 4월 11일에 내용을 수정하였습니다.) 등록페이지에서 유형에 따라 입력 가능/불가능 항목들이 존재합니다. 특정 체크박스 값에 따라 비활성화되고 다시 활성화되는 소스 코드를 정리해보겠습니다. 우선 결과 화면입니다. 다른곳을 클릭할 시의 활성화 특정 체크박스를 클릭시 비활성화 JSP 일반 체크박스 값들을 여러 개 설정해주었는데 여기서 특정 체크박스만 반응하도록 설정하기 위해서 예비창업자란 항목의 id값을 다른 값들과 달리 주었습니다. 그리고 해당되는 부분들에 대해 클래스에 applicable이란 놈을 넣어줍니다. 그래서 이녀석들을 일괄적으로 적용시키는거죠. 아이디값은 문서상 한개만 사용되는 규칙이 있기때문에 중복해서 만들어 주기가 곤란합니다. 그래서 중복 가능한 클래스를 여러개 만드는거죠! 1 .. 2020. 10. 2. [Jquery] 라디오 버튼 동의/미동의 기능 구현 (영상 有) 사이트를 만들다 보면 동의서에 대한 동의/미동의 기능을 구현할 경우가 종종있습니다. 제이쿼리를 통해 제가 알고 있는 두가지 방법을 공유해드리니 도움되셨으면 좋겠습니다. 첫번째는 한개 항목의 라디오 버튼 / 두번째는 다중 항목의 라디오 버튼의 정리 내용 입니다. 전체동의버튼 기능도 추가하였습니다. 첫번째! 한개의 항목에 대한 라디오버튼 처리입니다. 아래 화면과 같이 하나의 라디오 버튼을 가지고 동의/미동의 기능 구현 입니다. 요약하자면 함수를 부르는 onclick 값에 obj값을 넣어서 obj값이 Y 또는 N 일때 if문을 통해 값을 구하는 것입니다. Y일 경우 check가 되어 있다면 form문의 action 주소로 넘어갑니다. 최종 완료 화면입니다. JSP 1 2 3 4 5 6 7 8 9 10 내용내용.. 2020. 10. 2. [HTML&JQUERY] 연락처 숫자만 입력하는 방법 & 유효성 검사 (2021년 3월 24일 문구를 추가하였습니다.) 안녕하세요 ? HTML 과 JQUERY를 이용하여 연락처에 숫자만 입력할 수 있는 방법과 이에 대한 유효성 검사하는 방법에 대해 알아보겠습니다. 흔히들 많이 사용하는데 할때마다 잃어버려서 따로 정리해보았습니다. 한글이나 영문등은 사용하면 자동으로 지워지고 오직 숫자만 입력됩니다. HTML 우선 HTML입니다. 여기서는 INPUT을 3개로 만들어주고 NAME과 ID값을 3개로 만들어줍니다. 여기서 포인트는 maxlength를 이용하여 숫자 제한을하며 여기서 가장 중요한!! Onkeyup을 통해서 제이쿼리를 사용할 수 있도록 합니다. onkeyup="inputOnlyNumberFormat(this);" inputOnlyNumberFormat를 선언해야 반영이.. 2020. 9. 17. [JQuery] 여러 체크박스 클릭 시, 하나만 선택하는 방법 여러 체크박스 클릭 시, 하나만 선택하는 방법 체크박스가 여러 개 있으면 하나만 선택되는 것이 아닌, 체크하는 만큼 클릭이 됩니다. 이것은 라디오 버튼과 별개로 체크박스 특성때문인데요. 제이쿼리를 이용하여 해결할 수 있습니다. JSP 우선 JSP 입니다. 여기에서는 제이쿼리에서 사용할 name값을 설정해줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 기업종류 Colored by Color Scripter cs JQUERY 그 다음 제이쿼리입니다. 여기서 사용되는 prop() 메소드입니다. Prop()는 지정된 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가하며, javascript의 속성(propert.. 2020. 9. 15. 이전 1 2 3 다음
