title: Passing parameters from checkboxes with jQuery and ajax() method
body: <p>I'm trying to get some entries in a JSON Response from
  <a href="https://jsonplaceholder.typicode.com/posts" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/posts</a>
  by selecting checkboxes with jQuery and the ajax() method.</p>
  
  <p>I can see with Chrome DevTools that 2 requests are made, one of type "Document" and one of type "XHR". For The first the response is correct but for the second there is no response. This is how they look like:</p>
  
  <p>Request URL: <a href="https://jsonplaceholder.typicode.com/posts?userId%5B%5D=3&amp;userId%5B%5D=4" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/posts?userId%5B%5D=3&amp;userId%5B%5D=4</a>
  with Query String Parameters:
  userId[]: 3
  userId[]: 4</p>
  
  <p>Request URL: <a href="https://jsonplaceholder.typicode.com/posts?userId=3&amp;userId=4" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/posts?userId=3&amp;userId=4</a>
  with Query String Parameters:
  userId: 3
  userId: 4</p>
  
  <p>and this how my HTML and JavaScript and jQuery look like:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form id="myForm" action="https://jsonplaceholder.typicode.com/posts"&gt;
   &lt;input type="checkbox" id="Checkbox1" name = "userId" value = "1" /&gt;
  &lt;input type="checkbox" id="Checkbox2" name = "userId" value = "2" /&gt;
  &lt;input type="checkbox" id="Checkbox3" name = "userId" value = "3" /&gt;
  &lt;input type="checkbox" id="Checkbox4" name = "userId" value = "4" /&gt;
  &lt;input type="button" id="demo" value = "Demo" /&gt;
  &lt;input type="submit" id="submit"&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p><strong>JavaScript+ jQuery</strong></p>
  
  <pre><code>var url = "https://jsonplaceholder.typicode.com/posts";
  
  $("#submit").click(function() {
      var allVals = new Array();  
      $("input:checkbox[name=userId]:checked").each(function () {
      allVals.push($(this).val());
      console.log(allVals);
  
        $.ajax({
                url: url,
                data: {
                userId: allVals
            },
                type: "GET",
                dataType: "json",
          })
          .done(function (json) {
            console.log(json);
  
          }); 
  });
      });
  </code></pre>
  
  <p>In the jQuery Documentation is stated that the "data" option must be an object or a query string. However I have an array. So how can I deal with this situation? I've already tried some things but I can't get it working. How come the first request is correct? (which I actually don't need it) How can I initiate only the XHR Request?</p>