본문 바로가기

WEB/Javascipt

부모창 체크박스 데이터 를 팝업 자식창에 배열로 가져오기



제목 그대로 입니다.  "부모창 체크박스 데이터 팝업 자식창에 배열로 가져오기" 입니다.

제 상황에 최적화된 소스이니 참고 부탁드립니다.

시나리오

- 팝업창으로 현재 페이지 데이터를 가져가도록 하려고함

- 데이터를 하나씩 받아 넘기는데 부모 페이지에서 배열로 생성된 체크박스 값 넘겨주는 문제에 봉착

- 해결법은 jquery 배열로 받아 each 문으로 체크된 수 만큼 받아 처리한다.



예시) 아래 1,2 번과 같이 체크박스 데이터가 동시에 체크 되었을 경우 자식 팝업창으로 체크된 값을 넘겨주는 이슈.

부모 페이지에는 처리해 줄것이 없습니다.


위 데이터를 받는 자식 팝업창에서 처리해줍니다.
( 위데이터를 팝업창에서 값을 그대로 보여주는것이 목적)




<input type="checkbox" name="Work_Type[]" checked="checked" value="헤어디자이너" >헤어디자이너
<input type="checkbox" name="Work_Type[]" value="헤어스탭" > 헤어스탭
<input type="checkbox" name="Work_Type[]" value="피부관리" > 피부관리
<input type="checkbox" name="Work_Type[]" value="메이크업" > 메이크업
<input type="checkbox" name="Work_Type[]" value="속눈썹" > 속눈썹
<input type="checkbox" name="Work_Type[]" checked="checked" value="왁싱" > 왁싱
<input type="checkbox" name="Work_Type[]" value="네일아트" > 네일아트
<input type="checkbox" name="Work_Type[]" value="반영구" > 반영구

1. 체크박스 데이터 입니다. name 값을 배열로 생성 했습니다.
( 팝업을 띄우면서 저기 체크된 값("헤어디자이너","왁싱") 데이터를 가져오도록 합니다.)



1.       var aaa = [];
2. $("input[name='Work_Type[]']:checked", opener.document).each(function(i) {
3. aaa.push($(this).val());
4. $("#Work_Type").append("<span class='badge badge-pill badge-info'>"+aaa[i]+"</span> ")
5. });

2. 팝업이 띄워져 실행 되면서 위와같이 실행 하면 체크된 배열 수만큼 처리를 하게 됩니다.
   2.1 - 변수명에 배열을 선언 합니다.

   2.2 -  opener.document( 부모창 )에서  Work_Type[]    이름값을 가지고 체크가 활성화된 데이터를 가져옵니다.

   2.3 - 체크된 배열수 만큼 실행되면서  aaa  변수에 배열로 값들이 추가 됩니다.

   2.4 - 팝업창 문서안에 제가 원하는 아이디 값에 html 태그를 배열수 만큼 값[ aaa[i]   ]을 받아 추가합니다.



3.최종적으로 위와 같이 데이터를 가져와 그대로 html 형식으로 추가 됩니다.




끝.



반응형

'WEB > Javascipt' 카테고리의 다른 글

[jquery] input 박스에 숫자만 입력 받기  (0) 2019.05.27
[plugin] sweetalert2 , 경고창 플러그인  (0) 2019.02.10
[plugin]Bootstrap Notify  (0) 2019.01.15