Jquery: How to hold checkbox check / uncheck state in hidden field

i have a html table which i has many checkboxes. when user click on header checkbox then all child checkbox will be checked and unchecked based on header checkbox checked state.

user can uncheck and check any child checkbox too. i want to store child checkbox value in hidden field separated by comma. when child checkbox is selected then checkbox value will be store in hiiden field but if that checkbox value is in hiiden field then will not be store in hidden field.

when user uncheck anyone then that checkbox value will be removed from hidden field.

I tried this way but not successful. so guide me how to achieve it. my code as follows

<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id = "chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="101"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
 </tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl"  value="102"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl"  value="103"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<input id="hidden" type="hidden" name="hidden">

$(document).ready(function(){
  $('#chckHead').click(function () {
    $(".chcktbl").prop('checked', $(this).prop("checked"));
  });  

  $(".chcktbl").change(function() {
  var values = [];
  $('.chcktbl').each(function (index, obj) {
  alert('pop');
    if (this.checked === true) {
      values.push($(this).val());
    }
  });
  });
  alert(values.toString());

});