Add, and delete value in string when checkbox clicked

I have quite a large number of checkboxes that I need to get the value of when checked. I would like to save them in a text field with id numbers and divider of ':'

Its hard to explain but I will show the code first and then explain how I would like it,

  <input name="types" type="text" id="types" value="">
  <input name="class" type="text" id="class" value="">

 <input type='checkbox' data-toggle='collapse' id = "1" data-target='#collapsediv1'> Coach
 </input></li>

<div id='collapsediv1' class='collapse div1'>
<li class="coach"><input type="checkbox" value="1"> Economy</li>
<li class="coach"><input type="checkbox" value="2"> Standard</li>
<li class="coach"><input type="checkbox" value="3"> Executive</li>
<li class="coach"><input type="checkbox" value="4"> Premium</li>
</div></li>

 <input type='checkbox' data-toggle='collapse' id="2" data-target='#collapsediv1'> Coach
 </input></li>

<div id='collapsediv1' class='collapse div1'>
<li class="coach"><input type="checkbox" value="5"> Economy</li>
<li class="coach"><input type="checkbox" value="6"> Standard</li>
<li class="coach"><input type="checkbox" value="7"> Executive</li>
<li class="coach"><input type="checkbox" value="8"> Premium</li>
</div></li>

So I have a checkbox id 1 that when clicked collapses a div with another 4 checkboxes. Firstly when the Coach or ID 1 is checked I would like to add :1: to types value and if any of the checkboxes in there are clicked add the values like :1:3: etc to the classes value I can add them but I cant seem to delete them when unchecked? Also I can only do this with seperate functions but it must e possile with only a couple?

Any help of advice would be great, thank you