Question

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

到目前为止，这并没有证明是富有成效的，所以我需要找到一种方法来使这个单选按钮像功能一样点击复选框的父级。如果有一些亮光照在这上面，我将不胜感激。谢谢:)

编辑：插件通过这段代码过滤标记。这样，选中状态仅作为点击进行注册，然后使用单击的值来过滤标记。希望这有助于澄清我的问题！

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

Answer 1

来自WP谷歌地图的尼克。

我这次参加派对有点晚了，但我会尽我所能帮助。

您可以将代码更改为以下内容：

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

我已对此进行了测试，但确实有效。

Wp google maps pro复选框的行为类似于单选按钮

1 个答案: