라디오버튼 체크시 사라지는현상

라디오버튼 체크시 사라지는현상

QA

라디오버튼 체크시 사라지는현상

본문

<?php
include_once('./_common.php');

define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if(defined('G5_THEME_PATH')) {
    require_once(G5_THEME_PATH.'/index.php');
    return;
}

if (G5_IS_MOBILE) {
    include_once(G5_MOBILE_PATH.'/index.php');
    return;
}

include_once(G5_PATH.'/head.php');
?>


<style>
      #map {
        height: 594px;
        width: 1064px;
      }
       html, body {
        height: 500px;
        margin: 0;
        padding: 0;
      }
</style>

<script type="text/javascript">
    // 기본형식
    $(function(){
        setMenu("000000000000000",1);
        getRollingData('오토바이');
    });


    //카테고리 로드 스크립트                     
    //카테고리 로드 스크립트                     
    function setMenu(pCode,menuLevel){//console.log('1  '+menuLevel); 
        $('.menuSelected').removeClass("menuSelected");
        
        $("#"+pCode).addClass("menuSelected");
        
        $("#"+pCode).parent().parent().parent().first().addClass("menuSelected");
        

        var maxMenuLevel=3;
        var targetMenu = $("#caMenu"+menuLevel);
        var subMenuLevel = 0;
        subMenuLevel = parseInt(menuLevel,10) +1; 
        
        //마지막 카테고리 선택시 데이터 조회하지 않음
        if(menuLevel <= maxMenuLevel){
            //메뉴 조회
            $.ajax({
                type: "POST"
                ,url: "<?=G5_URL?>/ca.php" 
                ,data: {
                    mode:"list"
                    ,pcode:pCode
                }
                ,beforeSend: function()        {//////console.log("beforeSend");
                },complete: function()        {//////console.log("complete");
                },success: function(data)    {////console.log(data);                 
                    //메뉴초기화
                    if(menuLevel <3) $("#caMenu2 li").remove();
                    if(menuLevel <4) $("#caMenu3 li").remove();
                        
                    //메뉴 세팅                
                   if(data.list != null && data.list.length !=0){ 
                        for(var i=0; i< data.list.length ; i++){
                            var lis = null;
                            var labels = null;
                            var inputs = null;
                            var imgs = null;
                            lis = $('<li>', {
                                onClick: "setMenu('"+data.list[i].code+"','"+subMenuLevel+"');"
                                ,id:data.list[i].code
                                });
                            labels = $('<label>');
                            inputs = $('<input>', {type: "radio",value: data.list[i].code,name : "wr_3"});  
                             
                            imgs = $('<img>', {src: "<?=G5_URL?>/img/National/"+data.list[i].country+".png"});
                            
                            $(labels).append(inputs);                        
                            $(labels).append(data.list[i].name);
                            
                            if(menuLevel == 2 &&  data.list[i].country!='null' &&  data.list[i].country!=null &&  data.list[i].country!='' ) $(labels).append(imgs);
                            
                            $(lis).append(labels);                        
                            $(targetMenu).append(lis);              
                        } 
                    }else{
                        $(targetMenu).append($('<li/>',{html:"하위분류가 없습니다."}));
                    }
                },fail: function()             {////console.log("fail"); 
                },error:function(request,status,error){
                    ////console.log(" error code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
                   }     
            });
        }
        
    } 
     
    var map = null;         
    var markers = [];
    var markerCluster = null;
    var beaches = null;
    var searchBox = null;
    var geocoder = null;
     
    function initAutocomplete() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom:7,
          center: {lat: 36.4, lng: 127.6},
          mapTypeId: google.maps.MapTypeId.ROADMAP,
              zoomControl: false,
          mapTypeControl: false,
          scaleControl: false,
          streetViewControl: false,
          rotateControl: false,
          fullscreenControl: false
        }); 
        var searchBtn = document.getElementById('pac-input2');
        var input = document.getElementById('pac-input');
        searchBox = new google.maps.places.SearchBox(input);  
            
        // 검색
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds()); 
        });
        
        map.addListener('drag', function() {
            setMapOnAll(null);  
        });
        
          // Bounds for North America
           var allowedBounds = new google.maps.LatLngBounds(
             new google.maps.LatLng(32, 126), 
             new google.maps.LatLng(38, 131));
        
           // Listen for the dragend event
           google.maps.event.addListener(map, 'dragend', function() {
             if (allowedBounds.contains(map.getCenter())) return;
        
             // Out of bounds - Move the map back within the bounds
        
             var c = map.getCenter(),
                 x = c.lng(),
                 y = c.lat(),
                 maxX = allowedBounds.getNorthEast().lng(),
                 maxY = allowedBounds.getNorthEast().lat(),
                 minX = allowedBounds.getSouthWest().lng(),
                 minY = allowedBounds.getSouthWest().lat();
        
             if (x < minX) x = minX;
             if (x > maxX) x = maxX;
             if (y < minY) y = minY;
             if (y > maxY) y = maxY;
        
             map.setCenter(new google.maps.LatLng(y, x));
           });
           
        
        map.addListener('idle', function() {
          getMarkerData();
        });
        var geocoder = new google.maps.Geocoder()
         searchBtn.onclick = function () {
           
          geocoder.geocode({'address': $('#pac-input').val() }, function(places, status) {
          if (status === 'OK') {
                if (places.length == 0) {
                    return;
                  }
          
                  var bounds = new google.maps.LatLngBounds();
                  places.forEach(function(place) {
                    if (!place.geometry) {
                        ////console.log("Returned place contains no geometry");
                        return;
                    } 
                    
                    if (place.geometry.viewport) {
                        bounds.union(place.geometry.viewport);              
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                  });
                  map.fitBounds(bounds); 
          } else {
            //alert('Geocode was not successful for the following reason: ' + status);
          }
        });
           getMarkerData();
        }
        
        
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();
          if (places.length == 0) {
            return;
          }
          
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              ////console.log("Returned place contains no geometry");
              return;
            } 
            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);              
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds); 
        });  

    }  
    
    //검색
    function getMarkerData(){  
         setMapOnAll(null);
         var datas = setAjaxParam();
         $.ajax({
            type: "POST"
            ,url: "<?=G5_URL?>/shop/index_data.php" 
            ,data: {serchData:datas,mb_id:'<?=$member[mb_id]?>'} 
            
            ,beforeSend: function()        {//////console.log("beforeSend");
            },complete: function()        {//////console.log("complete");
            },success: function(data)    {console.log(data); 
                //검색결과목록
                appendList(data.list);
                setMarkerData(data.list);
                setMarkers(map);
            },fail: function()             {//////console.log("fail"); 
            },error:function(request,status,error){
                ////console.log(" error code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
               }     
        }); 
     
    }
     
     //검색조건 세팅
     function setAjaxParam(){
        var serchData = new Object(); 
        var searchArray = new Array(); 
        var searchInfo = new Object();    
        
        //메인에서는 그누보드카테고리 무시
        //searchInfo = new Object();
        //searchInfo.searchType = "ca_name";
        //searchInfo.fild = "ca_name";
        //searchInfo.value = $('#ca_name').val(); 
        //searchArray.push(searchInfo); 
        
        //----------------------------------
        //좌표는 ~ 범위검색  (위도 wr_1,  경도 wr_2)
        //지도 화면 전체 lat 
        //map.getBounds().f.b    35.07580034856863
        //map.getBounds().f.f    37.70201510090159        
        //지도 화면 전체 lng
        //map.getBounds().b.b    124.67763671875002        
        //map.getBounds().b.f    130.52236328125002
        searchInfo = new Object();
        searchInfo.searchType = "between";
        searchInfo.fild = "wr_1";
        searchInfo.value = map.getBounds().f.b+','+map.getBounds().f.f; //35.075,37.702
        searchArray.push(searchInfo);    
            
        searchInfo = new Object();
        searchInfo.searchType = "between";
        searchInfo.fild = "wr_2";
        searchInfo.value = map.getBounds().b.b+','+map.getBounds().b.f;
        searchArray.push(searchInfo);
        //----------------------------------
        
        // 카테고리 wr_3 = 카테고리
        searchInfo = new Object();
        searchInfo.searchType = "cata";
        searchInfo.fild = "wr_3";
        searchInfo.value = $('[name="wr_3"]:checked').val(); 
        searchArray.push(searchInfo);
        
        //연식 wr_6
        searchInfo = new Object();
        searchInfo.searchType = "between";
        searchInfo.fild = "wr_6";
        searchInfo.value = $('#wr_6_1').val()+','+$('#wr_6_2').val(); 
        searchArray.push(searchInfo);    
        
        //주행거리 wr_7
        searchInfo = new Object();
        searchInfo.searchType = "between";
        searchInfo.fild = "wr_7";
        searchInfo.value = $('#wr_7_1').val()+','+$('#wr_7_2').val(); 

        searchArray.push(searchInfo);    
        
        //가격 wr_10
        searchInfo = new Object();
        searchInfo.searchType = "between";
        searchInfo.fild = "wr_10";
        searchInfo.value = $('#wr_10_1').val()+','+$('#wr_10_2').val(); 
        searchArray.push(searchInfo);        
        
        //튜닝 wr_c4 = wr_c4
        searchInfo = new Object();
        searchInfo.searchType = "key";
        searchInfo.fild = "wr_c4";
        searchInfo.value = $('[name="wr_c4"]:checked').val(); 
        searchArray.push(searchInfo);
          
         //mode='map' 이면  전체 조회           <>   mode가 없거나, ''이면  pageRow에 따라 출력 
         searchInfo = new Object();
        searchInfo.searchType = "mode"; 
        searchInfo.fild = "";
        searchInfo.value = "map"; 
        searchArray.push(searchInfo);         
        //pageRow      현제페이지,패이당행수
         
         return searchArray; 
    }; 
    //우측목록만들기     
    function appendList(list){
         //기존 목록 삭제    
         $('#leftList li').remove();
          
        if(list != null && list.length !=0){ 
            for(var i=0; i< list.length ; i++){
                var li = null;
                var liSubs = null;
                var divs = null;
                var images = null;
                var boImgs = null;
                var uls = null;
                
                li = $('<li>', {
                    onClick: "document.location='<?=G5_BBS_URL?>/board.php?bo_table=shop&sca="+list[i]['ca_name']+"&wr_id="+list[i]['wr_id']+"';"
                    ,class:'map_product'
                });
                
                //이미지
                divs = $('<div>',{class:'map_p_img'});
                if(list[i]['file'][0]!= null){
                    images = $('<img>',{src: '<?=G5_URL?>/data/file/shop/'+ list[i]['file'][0]['file']});
                    $(divs).append(images);
                }
                
                //보증매물 표시
                if(list[i]['wr_check_view'] =='t'){
                    boImgs = $('<img>',{
                        src: '<?=G5_IMG_URL?>/boImegs.png'
                        ,class:'boImage'
                    });
                    $(divs).append(boImgs);
                }
                
                // 
                $(li).append(divs);
                
                
                
                if(list[i]['wr_c29']=='Y'){
                    complImg= $('<img>',{
                        src: '<?=G5_IMG_URL?>/deal.png'
                        ,class:'dealImage'
                    }); 
                    $(li).append(complImg);
                }                
                
                
                
            //첫쩨 줄 
                uls = $('<ul>',{class:'map_p_text'});
                
                liSubs = $('<li>');
                divs = $('<div>');
                $(divs).append(list[i]['wr_28']);//1차 카테고리명
                liSubs.append(divs);
                divs = $('<div>');
                $(divs).append(
                    (list[i]['wr_c29']=='Y' ? '---' : list[i]['wr_10'])
                    +'만원');//가격
                liSubs.append(divs); 
                uls.append(liSubs);  
                
                //둘쩨 줄 
                liSubs = $('<li>');
                divs = $('<div>');
                $(divs).append(list[i]['wr_29']);//세부모델
                liSubs.append(divs); 
                divs = $('<div>');
                $(divs).append(list[i]['wr_6']+'년식');//연식
                liSubs.append(divs); 
                divs = $('<div>');
                
                var wr_c7='';
                //카테고리명 : 오토바이 
                //표시          :  1:자동  / 2:6단 / 3:5단 / 4:4단 / 5:3단 
                if(list[i]['ca_name']=='오토바이'){
                    switch (list[i]['wr_c7']) {
                        case '1':wr_c7 = '자동';break;
                        case '2':wr_c7 = '6단';break;
                        case '3':wr_c7 = '5단';break;
                        case '4':wr_c7 = '4단';break;
                        case '5':wr_c7 = '3단';break;
                    }
                }            
                //카테고리명 : 자전거 
                //표시          :  1:크로몰리  / 2:알류미늄 / 3:카본 / 4:티타늄 / 5:하이텐스틸     
                if(list[i]['ca_name']=='자전거'){
                    switch (list[i]['wr_c7']) {
                        case '1':wr_c7 = '크로몰리';break;
                        case '2':wr_c7 = '알류미늄';break;
                        case '3':wr_c7 = '카본';break;
                        case '4':wr_c7 = '티타늄';break;
                        case '5':wr_c7 = '하이텐스틸';break;
                    }
                }
                //카테고리명 : 캠핑 및 트레일러 
                //표시          :  1:캠핑/카라반  / 2:캠핑카/모터홈  /  3:다목적   /  4:보트   / 5:제트스키
                if(list[i]['ca_name']=='캠핑 및 트레일러'){
                    switch (list[i]['wr_c7']) {
                        case '1':wr_c7 = '캠핑/카라반';break;
                        case '2':wr_c7 = '캠핑카/모터홈';break;
                        case '3':wr_c7 = '다목적';break;
                        case '4':wr_c7 = '보트';break;
                        case '5':wr_c7 = '제트스키';break;
                    }
                }    
                
                $(divs).append(wr_c7);//기어방식
                liSubs.append(divs);
                uls.append(liSubs);
                
                //셋쩨 줄 
                liSubs = $('<li>');
                divs = $('<div>'); 
                
                if(list[i]['ca_name']=='오토바이'
                    ||list[i]['ca_name']=='자전거'
                    ||list[i]['ca_name']=='보트 및 제트스키' 
                ){
                    $(divs).append(list[i]['wr_7']+list[i]['wr_8']);//주행거리
                }             
                
                liSubs.append(divs); 
                divs = $('<div>');
                switch (list[i]['ca_name']) {
                        case '오토바이':         $(divs).append( list[i]['wr_9']+'cc' );break;
                        case '자전거':        $(divs).append( list[i]['wr_9']+'사이즈' );break;
                        case '보트 및 제트스키':     $(divs).append( list[i]['wr_9']+'개' );break;                         
                }                 
                
                liSubs.append(divs); 
                divs = $('<div>');
                
                var wr_c8='';
                if(list[i]['ca_name']=='오토바이'){
                    switch (list[i]['wr_c8']) {
                        case '1':wr_c8 = '휴발유';break;
                        case '2':wr_c8 = '경유';break;
                        case '3':wr_c8 = '전기';break;
                        case '4':wr_c8 = '하이브리드';break;
                    }
                }
                if(list[i]['ca_name']=='보트 및 제트스키'){
                    switch (list[i]['wr_c8']) {
                        case '1':wr_c8 = '휴발유';break;
                        case '2':wr_c8 = '경유';break;
                        case '3':wr_c8 = '엔진없음';break; 
                    }
                } 
                
                switch (list[i]['ca_name']) {
                    case '오토바이': 
                    case '보트 및 제트스키': 
                        $(divs).append(wr_c8);
                    break;                         
                }        
                            
                //사용연료                
                liSubs.append(divs);
                uls.append(liSubs); 
                
                $(li).append(uls); 
                $('#leftList').append(li);                          
            } 
            //페이징
                
        }else{
            var li = null;
            li = $('<li>', {class:'map_product'});
            $(li).append('검색결과가 없습니다.');
            $('#leftList ul').append(li);                
        } 
     }
    //마커데이터 생성
    function setMarkerData(list){
        beaches = new Array(); 
        if(list != null && list.length !=0){ 
            for(var i=0; i< list.length ; i++){
                var row = new Array(); 
                row[0] = list[i]['wr_subject'];
                row[1] = list[i]['wr_1'];
                row[2] = list[i]['wr_2'];
                row[3] = "<?=G5_BBS_URL?>/board.php?bo_table=shop&sca="+list[i]['ca_name']+"&wr_id="+list[i]['wr_id'];
                beaches[i] =row;
            }
        }  
    }
    //마커표시
    function setMarkers(map) { 
        if(beaches != null){ 
            for (var i = 0; i < beaches.length; i++) {
                var beach = beaches[i];
                var marker = new google.maps.Marker({
                    position: {lat: parseFloat(beach[1]), lng: parseFloat(beach[2])},
                    title: beach[0],
                    url:  beach[3],
                    icon: '<?=G5_URL?>/images/m2.png'
                });
                //마커클릭이벤트 
                marker.addListener('click', function() {
                     
                    document.location = this.url;
                 }); 
                  
                 markers.push(marker);
            }
        }
        
        
        markerCluster = new MarkerClusterer(map, markers,mcOptions);
           
          //마커크룹 클릭 이벤트
          google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
             map.setCenter(cluster.getCenter()); 
            map.setZoom(map.getZoom()+2);            
        });
    }
    var clusterStyles = [ 
        {
            textColor: '#000',
            textSize:25,
            url: '<?=G5_URL?>/images/m1.png',
            height: 50,
            width: 50
          } 
    ];    
    var mcOptions = {
        gridSize: 50,
        styles: clusterStyles,
        maxZoom: 15
    };
    
    function setMapOnAll() {
        try{
            markerCluster.clearMarkers();
              beaches = null;
        }catch(exception){////console.log(exception.message);
        } 
        markers = [];
        
      } 

              
      //메뉴스크립트    
    $(function() {
        var $oe_menu        = $('#oe_menu3');
        var $oe_menu_items    = $oe_menu.children('li');
        var $oe_overlay        = $('#oe_overlay');

        $oe_menu_items.bind('mouseenter',function(){
            var $this = $(this);
            $this.addClass('slided selected');
            $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
                $oe_menu_items.not('.slided').children('div').hide();
                $this.removeClass('slided');
            });
        }).bind('mouseleave',function(){
            var $this = $(this);
            $this.removeClass('selected').children('div').css('z-index','1');
        });

        $oe_menu.bind('mouseenter',function(){
            var $this = $(this);
            $oe_overlay.stop(true,true).fadeTo(200, 0.6);
            $this.addClass('hovered');
        }).bind('mouseleave',function(){
            var $this = $(this);
            $this.removeClass('hovered');
            $oe_overlay.stop(true,true).fadeTo(200, 0);
            $oe_menu_items.children('div').hide();
        })
    });
    

    
    
           $(document).ready(function() {
 
                var $panel = $(".rolling_panel").find("div");
 
                var itemWidth = $panel.children().outerWidth(); // 아이템 가로 길이
                var itemLength = $panel.children().length;      // 아이템 수
 
                // Auto 롤링 아이디
                var rollingId;
 
                auto();
 
                // 배너 마우스 오버 이벤트
                $panel.mouseover(function() {
                    clearInterval(rollingId);
                });
 
                // 배너 마우스 아웃 이벤트
                $panel.mouseout(function() {
                    auto();
                });
 
                // 이전 이벤트
                $("#prev").on("click", prev);
 
                $("#prev").mouseover(function(e) {
                    clearInterval(rollingId);
                });
 
                $("#prev").mouseout(auto);
 
                // 다음 이벤트
                $("#next").on("click", next);
 
                $("#next").mouseover(function(e) {
                    clearInterval(rollingId);
                });
 
                $("#next").mouseout(auto);
 
                function auto() {
                    // 2초마다 start 호출
                    rollingId = setInterval(function() {
                        start();
                    }, 2000);
                }
 
                function start() {
                    //$panel.css("width", itemWidth * itemLength);
                    $panel.animate({"left": - itemWidth + "px"}, function() {
 
                        // 첫번째 아이템을 마지막에 추가하기
                        $(this).append("<ul>" + $(this).find("ul:first").html() + "</ul>");
 
                        // 첫번째 아이템을 삭제하기
                        $(this).find("ul:first").remove();
 
                        // 좌측 패널 수치 초기화
                        $(this).css("left", 0);
                    });
                }
 고수님들 라디오버튼 종류에서 오토바이를 선택을 하구 브랜드가서 브랜드 라디오버튼을선택하구 종류로오면 라디오버튼 값이 체크가 되어있어야하는데 체크된값이 사라지는데.. 안사라지게 할려면 어떻게해야되는지 고수님들 답변 부탁드립니다.

이 질문에 댓글 쓰기 :

답변 1

저도 저거 비슷한 문제 해결한적이 있었는데요

https://sir.kr/g5_skin/5192?sfl=wr_subject%7C%7Cwr_content&stx=3차

위 소스 참고로 작업했습니다.

저 스킨만드신 원 개발자분이 참 대단하신것 같아요.

 

처리요지는 지금처럼 카테고리 선택을 단순 jquery로 하지 말고 iframe으로 처리해서 처리하시더라구요

소스가 너무 길어서 다 보진 못했는데 드문드문보니 카테고리쪽 설정인것 같아

도움이 되었으면 해서 글 남겨드립니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 6
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT