title: How to store checked box API values and display in <span> HTML element
body: <p><a href="https://i.stack.imgur.com/vjKXa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vjKXa.png" alt="CheckboxImageExample"></a></p>
  
  <p>I need assistance in storing checkbox API values.  I have multiple checkboxes and I can display API values in html  when checkbox is checked.  But how do I store the initial value of a checked checkbox and show it in a span?</p>
  
  <p>I currently get “on” value instead of API initial value.</p>
  
  <p>eg. The value I want is “Faculty Lecture” as stored in the API</p>
  
  <p>Below is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//store checkbox values
  $('#myCheck1').on('change', function() {
    $('.results').html(this.checked ? this.value : '');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="checkbox" id="myCheck1" name="checks" class="round"&gt;
  
  &lt;span id="eventTitle" class="results"&gt;&lt;/span&gt;https://stackoverflow.com/questions/ask#</code></pre>
  </div>
  </div>
  </p>