title: Checkbox select all depending on form ID
body: <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>function toggle(source) {
    checkboxes = document.getElementsByName("foo");
    for(var i=0; i &lt; checkboxes.length; i++) {
      checkboxes[i].checked = source.checked;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="one"&gt;  
      &lt;fieldset&gt;  
      &lt;legend&gt;Select Quarter / 2017&lt;/legend&gt; 
      &lt;input type="checkbox" name="foo" onClick="toggle(this)" /&gt;All&lt;br/&gt;
      &lt;input type="checkbox" name="foo" &gt;Q1 2017&lt;br&gt;  
      &lt;input type="checkbox" name="foo" &gt;Q2 2017&lt;br&gt;  
      &lt;input type="checkbox" name="foo" &gt;Q3 2017&lt;br&gt; 
      &lt;input type="checkbox" name="foo" &gt;Q4 2017&lt;br&gt;   
      &lt;/fieldset&gt;
  &lt;/form&gt;  
  
  &lt;form id="two"&gt;  
      &lt;fieldset&gt;  
      &lt;legend&gt;Select Quarter / 2017&lt;/legend&gt; 
      &lt;input type="checkbox" name="foo" onClick="toggle(this)" /&gt;All&lt;br/&gt;
      &lt;input type="checkbox" name="foo" &gt;Q1 2017&lt;br&gt;  
      &lt;input type="checkbox" name="foo" &gt;Q2 2017&lt;br&gt;  
      &lt;input type="checkbox" name="foo" &gt;Q3 2017&lt;br&gt; 
      &lt;input type="checkbox" name="foo" &gt;Q4 2017&lt;br&gt;   
      &lt;/fieldset&gt;
  &lt;/form&gt;  
  
  &lt;form id="three"&gt;  
      &lt;fieldset&gt;  
      &lt;legend&gt;Select Quarter / 2017&lt;/legend&gt; 
      &lt;input type="checkbox" name="foo" onClick="toggle(this)" /&gt;All&lt;br/&gt;
      &lt;input type="checkbox" name="foo" &gt;Q1 2017&lt;br&gt;  
      &lt;input type="checkbox" name="foo" &gt;Q2 2017&lt;br&gt;  
      &lt;input type="checkbox" name="foo" &gt;Q3 2017&lt;br&gt; 
      &lt;input type="checkbox" name="foo" &gt;Q4 2017&lt;br&gt;   
      &lt;/fieldset&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to use the same javascript function to target the three different select all forms according to ID. With this function I now toggle all checkboxes, but I want to toggle all checkboxes in each form, so I don't toggle all checkboxes in all three forms at the same time.
  How can I do that?</p>