title: Filter posts by multiple taxonomies using checkbox and select
body: <p>Hey so I'll try to make this quick. I'm trying to filter my custom post type(attractions) with two different taxonomies(city and category) in a front end form using a select dropdown and checkboxes. Currently, my select filter works but my checkbox filters do not work on their own and don't work along with the select dropdown. </p>
  
  <p><a href="https://i.stack.imgur.com/jcs81.png" rel="nofollow noreferrer">Image</a></p>
  
  <p>I tried to use this article to help me out: <a href="https://rudrastyh.com/wordpress/ajax-post-filters.html" rel="nofollow noreferrer">https://rudrastyh.com/wordpress/ajax-post-filters.html</a></p>
  
  <p>Frontend PHP Form</p>
  
  <pre><code>&lt;form action="&lt;?php echo site_url() ?&gt;/wp-admin/admin-ajax.php" method="POST" id="filter"&gt;
  &lt;!--            Cities select filter --&gt;
          &lt;?php
      if( $terms = get_terms( 'city', 'orderby=name' ) ) : // to make it simple I use default categories
          echo '&lt;select value ="" name="cityfilter"&gt;&lt;option&gt;Select City...&lt;/option&gt;';
          foreach ( $terms as $term ) :
              echo '&lt;option value="' . $term-&gt;term_id . '"&gt;' . $term-&gt;name . '&lt;/option&gt;'; // ID of the category as the value of an option
          endforeach;
          echo '&lt;/select&gt;';
      endif;?&gt;
  &lt;!--        Categories filter --&gt;
          &lt;div class="categories-list"&gt;
          &lt;?php 
            $categories = get_categories(); 
            foreach ($categories as $category) {
              echo '&lt;input type="checkbox" name="categoryfilter" value="'.$category-&gt;cat_ID.'"&gt; '.$category-&gt;name.'&lt;br /&gt;';
            }
          ?&gt;
          &lt;/div&gt;
  
              &lt;button class="itenerary-filter"&gt;Apply filter&lt;/button&gt;
  &lt;input type="hidden" name="action" value="myfilter"&gt;
  
      &lt;/form&gt; 
  </code></pre>
  
  <p>Functions.php Query</p>
  
  <pre><code>function misha_filter_function(){
      $args = array(
          'orderby' =&gt; 'date', // we will sort posts by date
          'order' =&gt; $_POST['date'] // ASC или DESC
      );
      $relation = 'OR';
      if($_POST['categoryfilter'] == 'on' &amp;&amp; isset( $_POST['cityfilter'] )) {
          $relation = 'AND';
      }
      if( isset( $_POST['cityfilter'] ) ||  (isset( $_POST['categoryfilter']) &amp;&amp; $_POST['categoryfilter'] == 'on') )
          $args['tax_query'] = array(
              'relation' =&gt; $relation, 
              array(
                  'taxonomy' =&gt; 'city',
                  'field' =&gt; 'id',
                  'terms' =&gt; $_POST['cityfilter']
              ),
              array(
                  'taxonomy' =&gt; 'category',
                  'field' =&gt; 'id',
                  'terms' =&gt; $_POST['categoryfilter'],
              ),
          );
  
      $query = new WP_Query( $args );
  
      if( $query-&gt;have_posts() ) :
          while( $query-&gt;have_posts() ): $query-&gt;the_post();
              get_template_part('template_parts/loop_content','attractions');
          endwhile;
          wp_reset_postdata();
      else :
          echo 'No posts found';
      endif;
  
      die();
  }
  
  
  add_action('wp_ajax_myfilter', 'misha_filter_function'); 
  add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');
  </code></pre>
  
  <p>Javascript </p>
  
  <pre><code>$('#filter').submit(function(){
          var filter = $('#filter');
          $.ajax({
              url:filter.attr('action'),
              data:filter.serialize(), // form data
              type:filter.attr('method'), // POST
              beforeSend:function(xhr){
                  filter.find('button').text('Processing...'); // changing the button label
              },
              success:function(data) {
                  filter.find('button').text('Apply filter'); // changing the button label back
                  $('#external-events-listing').html(data); // insert data
                  $('#external-events-listing .feature-attraction').addClass('feature-attraction_itenerary ui-draggable ui-draggable-handle').removeClass('feature-attraction');
                  $('.feature-attraction_itenerary .wrapper').addClass('wrapper_itenerary').removeClass('wrapper');
                  $('#external-events .feature-attraction_itenerary').each(function() {
                          // store data so the calendar knows to render an event upon drop
                          $(this).data('event', {
                              title: $.trim($(this).text()),
                              // use the element's text as the event title
                              stick: true // maintain when user navigates (see docs on the renderEvent method)
                          });
                          // make the event draggable using jQuery UI
                          $(this).draggable({
                              zIndex: 999,
                              revert: true,
                              // will cause the event to go back to its
                              revertDuration: 0 //  original position after the drag
                          });
                  });
              }
          });
          return false;
      });
  </code></pre>
  
  <p>Any help would be appreciated!</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>So I var_dump($args); as suggested. I got this array by selecting an option from my drop down and selecting a checkbox. The thing is, relation should not be 'relation' => 'OR' when selecting both it should be 'AND'. What I want to be able to do is when both filters are selected 'OR' should be 'AND'. Is there anyway to do so?</p>
  
  <pre><code>array (size=3)
    'orderby' =&gt; string 'date' (length=4)
    'order' =&gt; null
    'tax_query' =&gt; 
      array (size=3)
        'relation' =&gt; string 'OR' (length=2)
        0 =&gt; 
          array (size=3)
            'taxonomy' =&gt; string 'city' (length=4)
            'field' =&gt; string 'id' (length=2)
            'terms' =&gt; string '6' (length=1)
        1 =&gt; 
          array (size=3)
            'taxonomy' =&gt; string 'category' (length=8)
            'field' =&gt; string 'id' (length=2)
            'terms' =&gt; string '7' (length=1)
  </code></pre>