title: Get posts with Ajax posts filter with multi selection checkboxes
body: <p>I am trying to achieve <strong>an ajax post filter</strong> with a form which use <strong>muti-selection checkboxes</strong>. <em>I have shortened the form with only 3 groups of 4 checkboxes each (instead of 11 groups).</em></p>
  
  <p>Here my filter have 3 <strong>groups</strong> <em>(master keys)</em> which are <strong><code>brand</code></strong>, <strong><code>ram</code></strong> and <strong><code>price</code></strong>, and every group have 4 different key / values <em>(checkboxes)</em>. Each checkbox in the group can be checked <em>(multi-selection)</em></p>
  
  <blockquote>
    <p>Here is the live link for this project, and if you check with your browser console tools, you will see that the data is correctly sent by jQuery and received by my php function.</p>
  </blockquote>
  
  <p><strong>This is working:</strong><br>
  The <strong><code>HTML</code></strong> file with all the checkboxes is working fine with my ajax jQuery script and it <strong>sends correctly</strong> an array of key/values to my php function. I have correctly registered my jQuery script and used as well as </p>
  
  <p><strong>The array of data received</strong> <em>(for 2 checked checkboxes for example of the same group)</em>:</p>
  
  <pre><code>$choices = array( 'brand1' =&gt; 'Nokia', 'brand3' =&gt; 'Sony' );**`wp_localize_script()`**…
  </code></pre>
  
  <blockquote>
    <p><strong>What is not working yet:<br></strong>
    - Prepare the data for the <strong><code>WP_query()</code></strong><br>
    - The query herself <strong><code>$args</code></strong> array</p>
  </blockquote>
  
  <p>How to manage call_post() function, after that it get value from JS and disply posts using loop??**</p>
  
  <blockquote>
    <p>The PHP code in <strong><code>function.php</code></strong>:</p>
  </blockquote>
  
  <pre><code>add_action('wp_ajax_call_post', 'call_post');
  add_action('wp_ajax_nopriv_call_post', 'call_post');
  function call_post(){
  
  $choices = $_POST['choices'];
  print_r($_POST['choices']);
  foreach($choices as $name =&gt; $choice)
      $fam = explode('-', $name);
      $family = $fam[0];       
  }
  
  $args = array(
      'post_type' =&gt; 'post',
          array(
              'key' =&gt; 'brand',
              'value' =&gt; $brand,
          ) ,
           array(
              'key' =&gt; 'ram',
              'value' =&gt; $ram,
          ) ,
           array(
              'key' =&gt; 'price',
              'value' =&gt; $price,
      ) ,
  );
  
  $query = new WP_Query($args);
      if( $query-&gt;have_posts() ) :
          while( $query-&gt;have_posts() ): $query-&gt;the_post();
            echo file_get_contents(locate_template("content.php"));
          endwhile;
          wp_reset_query();
      else :
          wp_send_json($query-&gt;posts);
      endif;
   die();
  }
  </code></pre>
  
  <blockquote>
    <p>Script </p>
  </blockquote>
  
  <pre><code>jQuery(document).ready(function($){
      $('#phones-filter .br').click(function(){
  
          var choices = {}; // declaring an empty array
          var choice = $(this).attr('name');
          $('.contents').remove();
          $('.filter-output').empty();
  
          // scanning each checkbox for checked state data
          $('div &gt; li &gt; .br').each(function(index, obj) {
              if($(this).prop('checked')){
                  var name = $(this).attr('name'), val = $(this).val();
                  choices[name] = val;
              }
          });
  
          $.ajax({
              url: ajaxobject.ajaxurl,
              type :'POST',
              data : {
                  'action' : 'call_post',
                  'choices' : choices,
              },
              success: function (result) {
                  $(choice).appendTo('.filter-output');
                  console.log(result);
                  console.log(choices);
              },
              error: function(err){
                  console.log(err);
                  console.log(choices);
              }
          });
      })
  });
  </code></pre>
  
  <blockquote>
    <p>Form.php <em>(shortened)</em></p>
  </blockquote>
  
  <pre><code>&lt;form  id="phones-filter" &gt;
  &lt;div class="brand"&gt;
          &lt;li&gt;&lt;input type="checkbox" name="brand-1" value="Nokia" class="br"&gt; NOKIA &lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="brand-2" value="LG" class="br"&gt; LG &lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="brand-3" value="Sony" class="br"&gt; Sony &lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="brand-4" value="Apple" class="br"&gt; Apple &lt;/li&gt;
  &lt;/div&gt;
  &lt;div class="ram"&gt;
          &lt;li&gt; &lt;input type="checkbox" name="ram-1" value="1GB" class="br"&gt; 1 GB  &lt;/li&gt;
           &lt;li&gt;&lt;input type="checkbox" name="ram-2" value="2GB" class="br"&gt; 1 GB  &lt;/li&gt;
           &lt;li&gt;&lt;input type="checkbox" name="ram-3" value="3GB" class="br"&gt; 2 GB  &lt;/li&gt;
           &lt;li&gt;&lt;input type="checkbox" name="ram-3" value="4GB" class="br"&gt; 4 GB    &lt;/li&gt;
  &lt;/div&gt;
  &lt;div class="price"&gt;
          &lt;li&gt;&lt;input type="checkbox" name="price-1" value="$100" class="br"&gt; $100 &lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="price-2" value="$200" class="br"&gt; $200 &lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="price-3" value="$300" class="br"&gt; $300 &lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="price-4" value="$500" class="br"&gt; $400 &lt;/li&gt;
  &lt;/div&gt;
  &lt;div class="filter-output"&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <blockquote>
    <p>content.php</p>
  </blockquote>
  
  <pre><code>    &lt;div &lt;?php post_class( 'col-lg-2 col-md-2 col-sm-3 col-xs-6 ' ); ?&gt; id="post-&lt;?php the_ID(); ?&gt;"&gt;
      &lt;div class="single-post"&gt; 
  
                 &lt;div class="post-thumb" &gt; 
                          &lt;a href="&lt;?php echo esc_url( post_permalink() ); ?&gt;"&gt;
                              &lt;?php the_post_thumbnail  ( 'large', array(
                                      'class' =&gt; 'img-responsive' 
                              ) ); ?&gt; 
                              &lt;/a&gt;
                  &lt;/div&gt;  
  
          &lt;div class="post-info"&gt;     
              &lt;div class="post-title"&gt;&lt;li&gt;&lt;a href="&lt;?php echo esc_url( post_permalink() ); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;                    
              &lt;div class="rs"&gt;&lt;p&gt;&lt;?php echo get_post_meta( get_the_ID(), 'price', true ); ?&gt;&lt;?php _e( '', 'mobilewebsite' ); ?&gt;&lt;/p&gt;&lt;/div&gt;         
          &lt;/div&gt; 
  
      &lt;/div&gt;                                 
  &lt;/div&gt;
  &lt;?php $item_number++;
   if( $item_number % 2 == 0 ) echo '&lt;div class="clearfix visible-xs-block"&gt;&lt;/div&gt;';
   if( $item_number % 4 == 0 ) echo '&lt;div class="clearfix visible-sm-block"&gt;&lt;/div&gt;';
   if( $item_number % 6 == 0 ) echo '&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;'; 
   if( $item_number % 6 == 0 ) echo '&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;'; 
   ?&gt;
  </code></pre>