2016-06-02 1 views
1

WP Google지도 프로 필터/카테고리에이 문제가 있습니다. 기본적으로 플러그인은 카테고리를 선택 드롭 다운 및 체크 박스로 표시합니다. 그리고 select 드롭 다운은 그다지 도움이되지 않았기 때문에 체크 박스에 라디오 버튼 기능을 구현하려고했습니다.Wp google maps pro 체크 박스가 라디오 버튼처럼 동작합니다.

그래서 내가하려는 것은 이러한 확인란을 라디오 버튼처럼 동작하게 만드는 것입니다. 그래서 하나가 체크되면 다른 사람들은 체크되지 않게됩니다. 그래도 잡을 수있어. 나는 아이보다는 부모를 클릭해야합니다. 체크 박스 자체는 숨겨지기 때문에 클라이언트가 요청했습니다. 디자인이 깨져서 마커를 필터링하기 위해 탭 전환 기능을 만들어야합니다.

나는 css로 체크 박스를 숨겨 놨고 부모 스타일을 지정하고 jquery로 일부 아이콘을 추가했다. 아래는 html 레이아웃입니다. 여기

<div class="parent"> 
    <i class="category-icon-one"></i> 
    <input type="checkbox" class="wpgmza_checkbox" id="wpgmza_cat_checkbox_4" 
name="wpgmza_cat_checkbox" mid="1" value="4" tabindex="0"> 
    First Category 
</div> 
<div class="parent"> 
    <i class="category-icon-two"></i> 
    <input type="checkbox" class="wpgmza_checkbox" id="wpgmza_cat_checkbox_4" 
name="wpgmza_cat_checkbox" mid="1" value="4" tabindex="0"> 
    Second Category 
</div> 

내가 지금까지 어떻게 관리 한 그 jQuery를 수 있습니다 :

$('.parent').click(function(){ 
    $('.parent').each(function(){ 
     $(this).find('input:checkbox').prop('checked', false); 
    }); 
    $(this).find('input:checkbox').prop('checked', true); 
}); 

을 지금까지이 결실 증명되지 않은, 그래서 기능 등이 라디오 단추를 만들 수있는 방법을 찾아야 체크 박스의 부모를 클릭합니다. 이 부분에 약간의 빛이 비치면 고맙겠습니다. 감사합니다 :)

EDIT : 플러그인은이 코드를 통해 마커를 필터링합니다. 이 상태는 선택된 상태가 클릭으로 만 등록되고 클릭 된 값은 마커를 필터링하는 데 사용됩니다. 희망이 내 문제를 명확히하는 데 도움이!

jQuery("body").on("click", ".wpgmza_checkbox", function() { 
/* do nothing if user has enabled store locator */ 
    var wpgmza_map_id = jQuery(this).attr("mid"); 
    if (jQuery("#addressInput_"+wpgmza_map_id).length > 0) { } else { 
     var checkedCatValues = jQuery('.wpgmza_checkbox:checked').map(function() { 
        return this.value; 
       }).get(); 
       if (checkedCatValues[0] === "0" || typeof checkedCatValues === 'undefined' || checkedCatValues.length < 1) { 
        InitMap(wpgmza_map_id,'all'); 
        wpgmza_filter_marker_lists(wpgmza_map_id,'all'); 
       } else { 
        InitMap(wpgmza_map_id,checkedCatValues); 
        wpgmza_filter_marker_lists(wpgmza_map_id,checkedCatValues); 
       } 
      } 
}); 
+0

확인란이 숨겨져 있다면 라디오 버튼을 사용하지 않는 이유는 무엇입니까? 또는 플러그인으로 플러그인을 사용할 수없는 이유는 무엇입니까? 질문을 이해하면 입력 자 (라디오 또는 체크 박스)를 클릭하여 하위 항목을 선택하고 같은 이름의 그룹에서 다른 사용자의 선택을 취소 하시겠습니까? –

+0

플러그인은 라디오 버튼 기능을 제공하지 않습니다. 라디오 버튼으로 플러그인의 백엔드 편집을 시도했지만 코드 자체가 엉망 이었기 때문에 프론트 엔드 솔루션을 만드는 데 중점을 두었습니다. –

+0

@DavidThomas - 기본적으로 10 개의 카테고리가 있습니다. 각각은 클래스 부모와 함께 div 내에 있습니다. 그래서 div를 클릭 할 때마다 체크 박스가 체크됩니다. 그래서 이런 일이 생길 때 나는 다른 모든 체크 박스를 체크하지 않기를 바란다. –

답변

1

여기에서 WP Google지도의 닉.

나는 파티에 좀 늦었지만 할 수있는 곳에서 도와 줄 것입니다.

다음에 코드를 변경할 수 있습니다

jQuery("body").on("click", ".wpgmza_checkbox", function() { 
    var wpgmza_map_id = jQuery(this).attr("mid"); 
    var orig_element = jQuery(this); 
    if (jQuery("#addressInput_"+wpgmza_map_id).length > 0) { } else { 
     // get the value of the current checked checkbox 
     var checked_value = jQuery(this).attr("value"); 
     if (checked_value === "0" || typeof checked_value === 'undefined' || checked_value.length < 1) { 
      InitMap(wpgmza_map_id,'all'); 
      wpgmza_filter_marker_lists(wpgmza_map_id,'all'); 
     } else { 
      InitMap(wpgmza_map_id,checked_value); 
      wpgmza_filter_marker_lists(wpgmza_map_id,checked_value); 
     } 
     // reset all other checkboxes 
     jQuery("input:checkbox[class^=wpgmza_checkbox]").each(function(i) { 
      if (jQuery(orig_element).attr('value') !== jQuery(this).val()) { jQuery(this).attr('checked',false); } 
     }); 
    } 
}); 

나는이 테스트를했는데 그것을 작동합니다.

관련 문제