title: Using JQuery to get the value of the unchecked checkboxes in a div
body: <p>I'm trying to store the <code>values</code> from a set of unchecked <code>html</code> checkboxes. I understand that <code>JQuery</code> does not have an :unchecked selector so I must invert the :checked selector. I've done this and I am getting the values of the unchecked boxes as well as a number of other values such as <code>null</code> and <code>0</code>. I don't know where these are coming from. </p>
  
  <p>Here is my <code>HTML</code>:</p>
  
  <pre><code>   &lt;div id="tag_results"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" value="29" name="tag" checked=""&gt;&lt;/input&gt;
                  Agriculture
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" value="30" name="tag" checked=""&gt;&lt;/input&gt;
                  Angling
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" value="37" name="tag"&gt;&lt;/input&gt;
                  Animals
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="checkbox" value="54" name="tag" checked=""&gt;&lt;/input&gt;
                  Arts
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my <code>JQuery</code>:</p>
  
  <pre><code>    $('#saveBtn').click(function(e){
                  e.preventDefault();
                  //Get hidden field values and store in an Array
  
                  $tagArray = [];
                  $removeTags = [];
  
                  //Get the Checked Tags and store in an Array(will be added)
                  $('#tag_results :checked').each(function(){
                      $tagArray.push(this.value);
                  });
  
                  //Get the Unchecked Tags and Store in an Array(will be removed)
                  $('#tag_results :not(:checked)').each(function(){
                      $removeTags.push(this.value);
                  });
  
                  console.log($removeTags);
  
                  //Make Ajax request to the add_tags script and pass Array as parameter. When response recieved show dialog. 
                  //Pass the name, id and type of company with the array of tags to the save_tags.php script. 
                  $('#active_tags').load('pages/ajax/save_tags.php', {'removeTags': JSON.stringify($removeTags),'tags': JSON.stringify($tagArray) ,'name': $('#comp_name').val(), 'id': $('#comp_id').val(), 'type': $('#type').val() }, function(response, status, xhr){
                  });
     });
  </code></pre>
  
  <p>this is the result of <code>console.log</code>:</p>
  
  <pre><code>Array [ undefined, 0, 0, 0, "37", 0, "54" ]
  </code></pre>
  
  <p>This is the code I use to generate the <code>html</code> for the checkboxes:</p>
  
  <pre><code>$output = "&lt;ul&gt;";
      if(mysql_num_rows($result) &gt; 0){//If results returned (tags found matching letter) so construct list
          while($row = mysql_fetch_array($result)){//while there are rows in the results array add a list item 
              if(in_array($row['name'], $applied_tags)){
                  $output .= "&lt;li&gt;" .'&lt;input checked type="checkbox" name="tag" value="'.$row['id'].'"&gt;' .$row['name'] .'&lt;/li&gt;'.PHP_EOL;
              }else{
                  $output .= "&lt;li&gt;" .'&lt;input type="checkbox" name="tag" value="'.$row['id'].'"&gt;' .$row['name'] .'&lt;/li&gt;'.PHP_EOL;
              }
          }
      }else{//Else there was no matching tags so display an error message to the user. 
          $output .= "&lt;li&gt;No Tags found beginning with the letter " . $letter . "&lt;/li&gt;";
      }
      $output .= "&lt;/ul&gt;";
  </code></pre>
  
  <p>Does anyone have any clue what could be causing this? Surely based on the above code the array should contain the values 37 and 54...</p>