title: Toggle checkbox checked attribute without jQuery
body: <p>I have seen similar questions such as "<a href="https://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript">How do I toggle an element's class in pure JavaScript?</a>", but this question refers to attributes instead.</p>
  
  <p>I have a checkbox like so:</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-html lang-html prettyprint-override"><code>&lt;span class="newsletter-checkbox"&gt;
    &lt;input type="checkbox" name="newsletter" id="newsletter" checked&gt; Sign up to the newsletter as well - recieve new posts in your inbox
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I make it so that when anywhere in <code>.newsletter-checkbox</code> (including the text) is clicked, it toggles the checkbox <code>checked</code> attribute?</p>