title: Google search bar - add custom search text thru input checkbox
body: <p>I am trying to add custom search text to a google search bar when a checkbox clicked and remove said text when this is removed.  I have figured out how to add/ remove the text in a text-area and how to put custom text in the search bar but I am having some difficulties in figuring out how to replace the custom text in the search bar with the text from the checkboxes when these are clicked. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="content"&gt;
          &lt;div id="search"&gt;
  &lt;gcse:search&gt;&lt;/gcse:search&gt;
              &lt;div class="check_content"&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="checkbox" value="Value 1" id="checkbox1" name="checkbox" /&gt;
                  &lt;label for="checkbox1" &gt;&lt;/label&gt;
              &lt;/div&gt;
                   &lt;span&gt;Value 1&lt;/span&gt;
              &lt;/div&gt;
               &lt;div class="check_content"&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="checkbox" value="Value 2" id="checkbox2" name="checkbox" /&gt;
                  &lt;label for="checkbox2" &gt;&lt;/label&gt;
            &lt;/div&gt;
                   &lt;span&gt;Value 1&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="check_content"&gt;
              &lt;div class="checkbox"&gt;
                  &lt;input type="checkbox" value="Value 3" id="checkbox3" name="checkbox" /&gt;
                  &lt;label for="checkbox3" &gt;&lt;/label&gt;
  
                &lt;/div&gt;
                  &lt;span&gt;Value 1&lt;/span&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;textarea id="text"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
  
  &lt;strong&gt;Google Search Bar with Custom Text&lt;/strong&gt;
  
  &lt;script&gt;
    (function() {
      var cx = '014565979167738564771:fixr4qj_zfs';
      var gcse = document.createElement('script');
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    })();
  
    window.onload = function(){
        document.getElementById('gsc-i-id1').placeholder = 'This is custom text';
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>This is placed right above the closing body tag.</p>
  
  <p><strong>Function which appends text from checkboxes to textarea</strong></p>
  
  <pre><code>$("input[name=checkbox]").change(function() { 
    updateAllChecked(); 
  }); 
  
  function updateAllChecked() { 
    $('#text').text(''); 
    $("input[name=checkbox]").each(function() { 
      if (this.checked) { 
        let old_text = $('#text').text() ? $('#text').text() + ', ' : ''; 
        $('#text').text(old_text + $(this).val()); 
      } 
    }) 
  }
  </code></pre>
  
  <p>Also included the JS Fiddle - <a href="https://jsfiddle.net/2pdkv6ph/1/" rel="nofollow noreferrer">https://jsfiddle.net/2pdkv6ph/1/</a></p>