title: How to get the value of checked checkbox in vanilla JavaScript?
body: <p>I am working on this snippet. Why am I not able to get the <code>value</code> of any checked checkbox with class <code>.shapes</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>document.getElementsByName('shapes').onclick = function() {
    var checkboxes = document.getElementsByName('shapes')[0].value;
    console.log(checkbox.value);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="js-shapes"&gt;
    &lt;span class="ib"&gt;
            &lt;input type="checkbox" name="shapes" class="shapes" value="circle" id="cb-circle"&gt; &lt;label for="cb-circle"&gt;Circle&lt;/label&gt;
          &lt;/span&gt;
    &lt;span class="ib"&gt;
            &lt;input type="checkbox" name="shapes" class="shapes" value="diamond" id="cb-diamond"&gt; &lt;label for="cb-diamond"&gt;Diamond&lt;/label&gt;
          &lt;/span&gt;
    &lt;span class="ib"&gt;
            &lt;input type="checkbox" name="shapes" class="shapes" value="square" id="cb-square"&gt; &lt;label for="cb-square"&gt;Square&lt;/label&gt;
          &lt;/span&gt;
    &lt;span class="ib"&gt;
            &lt;input type="checkbox" name="shapes" class="shapes" value="triangle" id="cb-triangle"&gt; &lt;label for="cb-triangle"&gt;Triangle&lt;/label&gt;
          &lt;/span&gt;
    &lt;span class="ib"&gt;
            &lt;input type="checkbox" name="shapes" class="shapes" value="all" id="cb-all" checked&gt; &lt;label for="cb-all"&gt;all Shapes&lt;/label&gt;
          &lt;/span&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>