title: How to create an array with values of all checked checkboxes in jQuery
body: <p>I have four checkboxes (addition, subtraction, multiplication, and division) created like this:
  </p>
  
  <pre><code>&lt;input class="operation" type="checkbox" id="chkAdd" value="addition"&gt;&lt;label&gt;Addition&lt;/label&gt;
  </code></pre>
  
  <p>I am trying to create a function that will create an array with the values of all the checkboxes that are checked when a button is pushed.  The end result is to pass the array into another function that will create math problems using the selected math operators.  I have looked at several similar posts, but still can't figure out why this isn't working.  Here is what I have so far:</p>
  
  <pre><code>function buttonPushed() {
    var checkedBoxes = [];
    $(document).ready(function() {
      $(".theButton").click(function(event) {
        event.preventDefault();
        checkedBoxes = $(".operation input:checkbox:checked").map(function() {
          checkedBoxes.push($(this).attr('val'));
        });
      });
    });
    alert(checkedBoxes);
  }
  </code></pre>
  
  <p>The <code>alert</code> is just to see if the function is working properly.  Currently, when all four checkboxes are checked, and I click the button, the <code>alert</code> window appears, but it's empty.  I have tried calling the function in <code>&lt;script&gt;</code> tags, and using the button's <code>onclick="function()"</code>.  I'm just spinning my wheels on this now.  I would greatly appreciate any help.</p>