title: jquery: get selected checkboxes, put in array, delimit the array and output to dynamic html button
body: <p>I want to have a web button that is generated dynamically depending on which checkboxes a user selects, without needing to reload the page. I guess jQuery is the way to do this but I am a complete noob with jQuery/JavaScript (trying to learn on the fly, which isn't easy).</p>
  
  <p>Ultimately, I think it s/b a 2-step process: (1) as the user checks checkboxes, store them in an array and delimit them, and (2) output html to create a button that dynamically uses the delimited array values.</p>
  
  <p><strong>HTML form:</strong></p>
  
  <pre><code>&lt;input type="checkbox" name="catChoices[]" value="80s" /&gt;80s&lt;br /&gt;
  &lt;input type="checkbox" name="catChoices[]" value="90s" /&gt;90s&lt;br /&gt;
  &lt;input type="checkbox" name="catChoices[]" value="00s" /&gt;00s&lt;br /&gt;
  </code></pre>
  
  <p>Being a jQuery/JS novice, I've only come up with this to do step 1 mentioned above. I don't know if this is on the right track or completely off:</p>
  
  <p><strong>jQuery:</strong>   </p>
  
  <pre><code>$(document).ready(function() {
       $("input").click(function() {
         var checkValues = $('input[name=catChoices]:checked').map(function() {
           return $(this).val();
         }).get();
         str = checkValues.join(',');
       });
    });
  </code></pre>
  
  <p>I also don't know how to incorporate step 2 (get the button to be created dynamically with jQuery). The solutions I've googled show how to pass the values to html/PHP, which requires a page refresh, but I want the button to update on-the-fly as the user checks/unchecks checkboxes.</p>
  
  <p>Thanks for your help!</p>