title: Getting all selected checkboxes' corresponding values in an array
body: <p>Please have a look at the following code:</p>
  
  <pre><code>   $("#saveButton").click(function(){
  
          $this = $("#tableData").find("input:checked").parent().parent();
  
          tea = $this.find(".teaCls").text();
  
          $.ajax({
              type: "POST",
              url: "chkSelectedValues.php",
              data: "tea=" + tea,
              success: function(msg){
                  $("#theField").html(msg);
              }
  
          });       
  
      });
  </code></pre>
  
  <p>Now if multiple checkboxes are selected, <code>tea</code> and <code>flower</code> end up concatenating the <code>text</code>s from all those fields. If two checkboxes are selected and one contains the word <code>some</code> and the other one contains the word <code>text</code>, then finally the <code>tea</code> variable gets the value:  <code>sometext</code>. But I want <code>tea</code> to be an array containing these values (in this case <code>some</code> and <code>text</code>) since I need to pass them in AJAX request and want to catch easily in <code>chkSelectedValues.php</code></p>
  
  <p>Structure:</p>
  
  <pre><code>&lt;table #tableData&gt;
   &lt;tr&gt;
     &lt;td .teaCls&gt;&lt;/td&gt;
     &lt;td&gt; Checkbox here&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    .....
  </code></pre>
  
  <p>How can I do this? Thanks in advance.</p>