Adding/Removing Checkbox Values into TextArea
<p>I scoured the the site and found a few examples, I got close but not close enough.
I have 2 checkboxes and if a user checks them they are placed in the textarea, if the user removes the check. the value is removed. I want to keep cursor position too.</p>

<p>I am able  to add but its still clunky. </p>

<p>My fiddle is <a href="http://jsfiddle.net/pU2P9/18/" rel="nofollow">http://jsfiddle.net/pU2P9/18/</a></p>

<p>here is my code</p>

<p>
    Testing. Values from another field will be inserted here.
</p>

<pre><code>    &lt;form&gt;

           &lt;p&gt;Favorite Color  &lt;label&gt;&lt;input type="checkbox" value="Green" /&gt;Green&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" value="Red" /&gt;Red&lt;/label&gt;&lt;/p&gt;
    &lt;/form&gt;


 var textarea = document.getElementById("myTextArea1");
  // $('input[type=checkbox]').click(function () {
  $('input[type=checkbox]').change(function () {
  var $parentForm = $(this).closest("form");

 // var text = $(".insert-text", $parentForm).val();
  var text = $('input[type=checkbox]:checked').val() + " ";

 //  var text = $('input[type=checkbox]:checked', $parentForm).val() + " ";

  insertAtCursor(textarea, text);
  });

 function insertAtCursor(myField, myValue) {
  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
}

else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos) + myValue +            myField.value.substring(endPos, myField.value.length);
  }
else {
    myField.value += myValue;
    }
 }
 ;
</code></pre>

<p>Any help would be appreciated.</p>
