title: Adding an eventListener to each checkbox
body: <p>I'm looking for a clean and concise way to add event listeners to each of my checkboxes without having to repeat my Javascript code, I'm still wet behind the ears when it comes to JS, so any assistance would be  greatly appreciated.</p>
  
  <p><strong>Here's what I have so far</strong></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>   function exFunction() {};
  
  // on-click
  var x = document.getElementById("checkboxopt");
  x.addEventListener("click", function(){
      console.log("Opt");
    });
  
  var y = document.getElementById("checkboxopt1");
  y.addEventListener("click", function(){
      console.log("Opt 1");
    });
  var z = document.getElementById("checkboxopt2");
  z.addEventListener("click", function(){
      console.log("Opt 2");
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id=""&gt;&lt;input name="checkboxopt" id="checkboxopt" value="true" type="checkbox"&gt;&lt;br/&gt;&lt;/div&gt;
  &lt;div id=""&gt;&lt;input name="checkboxopt" id="checkboxopt1" value="true" type="checkbox"&gt;&lt;br/&gt;&lt;/div&gt;
  &lt;div id=""&gt;&lt;input name="checkboxopt" id="checkboxopt2" value="true" type="checkbox"&gt;&lt;br/&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>