title: How to collect values of checkboxes into Array in jQuery
body: <p>so I have a module popup window with a div. In it are several checkboxes, what I want to do is after the user has finished checking or unchecking the boxes he wants and clicks the done button. I want jQuery to dump all the selected values into an arrray.</p>
  
  <p>Originally I just added whatever was checked into an Array, but then I had problems with trying to remove the checked item from the Array if the user decided to uncheck it. Doing it the other way above seems to be the similar method.</p>
  
  <p>I created a <a href="http://codepen.io/leongaban/pen/aJiut" rel="nofollow">Codepen here</a>.</p>
  
  <p>My jQuery</p>
  
  <pre><code>$('.select-roles').click(function(){
      var selectedRole = $(this).html();
  
      var selectedArray = new Array();
  
      $('roleId input:checked').each(function() {
          selectedArray.push($(this).val());
          console.log($(this).val());
      });
  
      console.log('modalName = '+modalName);
      console.log('selected array contains: '+selectedArray);
  });
  
  // displays the value of the checked checkbox in the console
  $('input[type=checkbox]').click(function() {
  
      if($(this).is(':checked')){
          console.log( $(this).val())
      }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="modal-TV"&gt;
  
          &lt;div class="modal-top"&gt;
              &lt;div class="modal-title"&gt;Actor: Select one or more genres below&lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="modal-choices"&gt;
              &lt;div class="modal-col-1"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;input type="checkbox" value="Adult Animated"&gt;Adult Animated&lt;/li&gt;
                      &lt;li&gt;&lt;input type="checkbox" value="Anime"&gt;Anime&lt;/li&gt;
                      &lt;li&gt;&lt;input type="checkbox" value="Award Shows"&gt;Award Shows&lt;/li&gt;
                      &lt;li&gt;&lt;input type="checkbox" value="Behind The Scenes"&gt;Behind The Scenes&lt;/li&gt;
                      &lt;li&gt;&lt;input type="checkbox" value="Christian"&gt;Christian&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;!-- modal-choices --&gt;
  
          &lt;div class="modal-dashes"&gt;&lt;/div&gt;
          &lt;div class="modal-buttons"&gt;
              &lt;ul&gt;
                  &lt;a class="close" title="Cancel"&gt;&lt;li&gt;Cancel&lt;/li&gt;&lt;/a&gt;
                  &lt;li class="select-roles"&gt;Done&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- modal-TV --&gt;
  </code></pre>