title: Map checked checkboxes to hidden field after element is clicked
body: <p>I have an element with the class of <code>.selectall</code>. When I click that element, all table rows are then <code>checked</code>. What I would like to do is take all the <code>data-id</code> values of the checked checkboxes and store them in a hidden field with the ID of <code>#selected_items</code>. At the moment I have the current coffeescript that allows me to select each checkbox individually and map the <code>data-id</code> to the hidden field value. So I need the ability to click the <code>.selectall</code> element, have the hidden field populate, and then reflect any changes if I decide to individually uncheck any of the checkboxes.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button class="btn selectall" type="button"&gt;Select All&lt;/button&gt;
      &lt;button class="btn unselectall" type="button"&gt;Unselect All&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;table class="coupons"&gt;
      &lt;input class="inline" data-id="1" type="checkbox"&gt;
      &lt;input class="inline" data-id="2" type="checkbox"&gt;
      &lt;input class="inline" data-id="3" type="checkbox"&gt;
      ...
  &lt;/table&gt;
  
  &lt;input id="selected_items" name="selected_items" type="hidden" value=""&gt;
  </code></pre>
  
  <p>Coffeescript</p>
  
  <pre><code>$('.coupons input[type="checkbox"]').change(-&gt;
      ids = $('input[type="checkbox"]:checked')
          .map(-&gt; $(this).data("id"))
          .get().join(",")
  
      $("#selected_items").val(ids)
  )
  </code></pre>