Wp google maps pro checkboxes to behave like radio button

I’m having this problem with WP Google Maps Pro filters/categories. Basically the plugin offers to display the categories as select dropdown and checkboxes. And since the select dropdown proved not that much of an help I tried to implement the radio button functionality on the checkboxes.

So what I’m trying to do here is make these checkboxes behave like radio buttons. So when one is checked others become unchecked. There’s a catch though. I have to make the click on the parent rather than on the child. The checkbox itself was requested by my client to be hid, since it breaks his design, and I have to make the functionality of the tab switching in order to filter the markers.

Read More

I’ve hidden the checkboxes with css, and I’ve styled the parent and added some icons with jquery. Below is the html layout.

<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>

Here is the jQuery that I’ve managed to do so far:

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

So far this has not proved fruitful, so I need to find a way to make this radio button like functionality while clicking on the parent of the checkboxes. I would appreciate if some light were to shine on this. Thanks 🙂

EDIT: The plugin makes the filtering of the markers through this piece of code. This where the checked states are being registered only as clicks, and the clicked value then is being used to filter the markers. Hope this helps to clarify my issue!

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);
                }
            }
 });

Related posts

Leave a Reply

1 comment

  1. Nick from WP Google Maps here.

    I’m a bit late to the party with this but I’ll help where I can.

    You can change the code to the following:

    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); }
            });
        }
    });
    

    I’ve tested this and it works.