Ponga los valores de la casilla de verificación en la entrada oculta con jQuery

Me gustaría rellenar una entrada oculta con los valores de las casillas de verificación seleccionadas con un espacio entre estos valores. He intentado lo siguiente que en teoría debería funcionar pero no lo es ...

JS:

$(document).ready(function () {


      var vals = $(':checkbox:checked').map(function(){
         return $(this).val();
      }).get().join(',');

      // save the values to a hidden field
      $('#tags').val(vals);


});

HTML

 <form>

  <input type="checkbox" value="test1" id="test1"><label>Test</label>
  <input type="checkbox" value="test2" id="test2"><label>Test2</label>
  <input type="checkbox" value="test3" id="test3"><label>Test3</label>

  <input type="text" value="" id="tags">

</form>

¿Algunas ideas?

Respuestas a la pregunta(2)

Su respuesta a la pregunta