title: javascript dynamically add values to array
body: <p>I'm trying to loop over the checkboxes in a form and add their values to a multidimensional javascript object. The '<code>attrib</code>' data attribute will be the key. Possible key values are '<code>category</code>', '<code>product_group</code>' and '<code>language</code>' but I'd rather add them dynamically in case any more get added in the future.</p>
  
  <p>I want to end up with an object like this, which I can easily send as a json_encode 'd single value to the server.</p>
  
  <pre><code>values = {
      'category' : {1,2,3},
      'product_group' : {4,5,6},
      'language': {'en','fr','de'}
  };
  </code></pre>
  
  <p>Code below. Here obviously each iteration overwrites existing values instead of adding to it. I'm unsure where I can create values[key] as an object ... ? </p>
  
  <pre><code>$('.filter input, .multiselect-container input').change(function() {
      var values = {}
      $('.filter input:checked').each(function() {
          if($(this).is(':checked')) {
              var key = $(this).data('attrib')
              var value = $(this).val()
              values[key] = value
              // values[key].push(value) = calling method push of undefined ...
          }
          else {
              // Remove value
          }       
      })
      console.log(values) 
  })
  </code></pre>