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

【问题标题】：Wp google maps pro checkboxes to behave like radio buttonWp google maps pro 复选框的行为类似于单选按钮
【发布时间】：2017-02-26 00:19:35
【问题描述】：

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

【问题讨论】：

如果复选框仍然隐藏，为什么不直接使用单选按钮呢？或者由于某种原因，插件不可能做到这一点？据我了解，您希望单击输入的父项（单选或复选框）以选择后代输入并取消选择同名组中的其他输入？
插件不提供单选按钮功能。我尝试编辑插件的后端以使用单选按钮来实现，但代码本身一团糟，所以我将注意力转移到制作前端解决方案上。
@DavidThomas - 所以基本上有 10 个类别。它们中的每一个都在具有类父级的 div 内。因此，每当我点击一个 div 时，它里面的复选框就会被选中。因此，当发生这种情况时，我希望取消选中所有其他复选框。
您的代码（在此处测试：JS Fiddle demo）似乎有效。
嗯，确实如此。但是，在我的项目中，只有在注册了“点击”后才能实现该功能。就好像未解析“已检查”属性一样。无论如何，我是否可以触发单击一个复选框并同时取消选中其他复选框？ @大卫托马斯

标签： javascript jquery html wordpress checkbox

【解决方案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); }
        });
    }
});

我已经测试过了，它可以工作。

【讨论】：