選中和取消選中時，將復選框值添加到數組中/從數組中刪除復選框值（jQuery）

Question

在我當前正在處理的項目中，我使用單選按鈕和AJAX來更改自定義WordPress模板頁面上顯示的帖子。 它可以完美地工作，但是，客戶希望它是復選框而不是單選輸入，因此，每當用戶選擇一個新類別時，它就會添加到顯示的帖子中，而不是替換它。

例如：當前，如果您單擊category1，將顯示category1帖子。 單擊category2，category2帖子替換category1帖子。 如果兩個復選框都選中，客戶端希望同時顯示category1和category2。

這是我目前的JS：

jQuery(document).ready(function ($) {
  // AJAX Post Filter scripts
  var $checkbox = $("#filter input:checkbox");
  var $checked = $("#filter input:checkbox:checked");
  var $unchecked = $("#filter input:checkbox:not(:checked)");
  $checkbox.change(function () {
    if ($checked) {
      var catID = $(this).val();

      $.ajax({
        type: 'POST',
        url: afp_vars.afp_ajax_url,
        data: {
          "action": "load-filter",
          category__in: catID
        },
        success: function (response) {
          $(".filter-section").empty().html(response);
          return false;
          console.log('success!');
        }
      });
      console.log(catID);
    }
  });
});

我很確定我需要對我的變量catID進行.map() ，就像我在其他一些線程中看到的那樣，但是我一直無法找到適合我的解決方案。

編輯：我意識到我需要澄清什么，我都試過了。

我使用了以下代碼：

var catID = $(this).map(function () {
  return $(this).val();
}).get();

但是它所做的只是用新的復選框值替換變量值。 我需要添加到該值而不刪除已檢查的值。 然后，如果未選中復選框，則需要從數組中刪除該值。

Answer 1

我會嘗試這樣的事情：

let categoryIDs = [];

$('.checkbox').click((e) => {
  let id = e.currentTarget.id

  $(selector).html('')
  categoryIDs.indexOf(id) === - 1 ? (
    categoryIDs.push(Number(id))
  ) : (
    categoryIDs = categoryIDs.filter((item) => item !== id )
  )

  console.log(categoryIDs)
  categoryIDs.forEach((item) => {
    //ajax calls here

    //$.ajax({blah blah}).done(res => {
      //$(selector).append(res)
      //})
    console.log(item);
  })
})

在這里查看實際操作：

https://jsfiddle.net/mwypd9ve/

這樣，您要顯示的ID始終位於數組中，並且每次更改數組時，頁面將僅反映與數組ID相匹配的內容（因為先清除了.html('')然后在循環附加中每個ajax響應