title: Auto populate the textbox value with values checked in checkboxes but retain the values that are manually entered
body: <p>I  used the jquery below to auto populate a textbox based on values of checked or unchecked check boxes</p>
  
  <pre><code>function updateTextArea() {
          var allVals = [];
  
          $('#all :checked').each(function () {
                  allVals.push($(this).val());
          });
  
          document.getElementById('txtbox').value = allVals;
      }
      $(function () {
          $('#all input').click(updateTextArea);
          updateTextArea();
      });
  </code></pre>
  
  <p>and my html code is</p>
  
  <pre><code>&lt;div id="all"&gt;
  &lt;input id="txtbox" type="text" Height="100px"  Width="770px"  /&gt;   
    &lt;input id="Checkbox2" type="checkbox" value="abc1@abc.com" /&gt;
    &lt;input id="Checkbox3" type="checkbox" value="abc2@abc.com" /&gt;
    &lt;input id="Checkbox4" type="checkbox" value="abc3@abc.com" /&gt;
    &lt;input id="Checkbox5" type="checkbox" value="abc4@abc.com" /&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The above jquery works wells for every check and uncheck events of checkboxes and populating its values to textbox separated by comma, My issue is if someone manually enters some email separated by comma in the above textbox I want that value to be retained and not to be refreshed for the check and uncheck events of my check box. How can I achieve this?</p>