javascript - Wp 谷歌地图专业版复选框的行为类似于单选按钮

Question

我在使用 WP Google Maps Pro 过滤器/类别时遇到此问题。基本上，该插件提供将类别显示为选择下拉列表和复选框的功能。由于选择下拉列表证明没有多大帮助，我尝试在复选框上实现单选按钮功能。

所以我在这里想做的是让这些复选框表现得像单选按钮。因此，当其中一个受到检查时，其他的就会不受检查。但有一个问题。我必须点击 parent 而不是 child 。我的客户要求隐藏复选框本身，因为它破坏了他的设计，我必须实现选项卡切换的功能才能过滤标记。

我用 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 Google map 的 Nick。

我来晚了一点，但我会尽我所能提供帮助。

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

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

我已经测试过了，它有效。