title: Dynamically changing a checkbox doesn't trigger onChange?
body: <p>Note: jQuery is not an option.</p>
  
  <p>I want to detect a change in the state of a checkbox, but the onChange event doesn't seem to fire when I do this:</p>
  
  <pre><code>document.getElementById('myCheckBox').addEventListener('change',function() {
      console.log('Changed!');
  });
  document.getElementById('someLink').onClick = function() {
      // toggle checkbox
      document.getElementById('myCheckBox').checked = !document.getElementById('myCheckBox').checked;
  };
  </code></pre>
  
  <p>When I click #someLink the change event is not fired. I could add another listener to #myLink, but then if I add other links that check the same box I have to add more listeners. I want one listener for a checkbox change event. Again, jQuery is not an option, I need vanilla JS.</p>
  
  <p>EDIT: Sorry if I did not make this more clear, but I want to avoid adding complexity to each link that will check this box. So <em>ideally</em> (and maybe the answer is that this is impossible) I don't want to have to alter the link/click logic at all. I want to be able to change the .checked property anywhere in the code and have it be detected without additional logic at each change (if possible).</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Okay so there is apparently no way to do this nicely without altering the onClick logic, so (like some kind of animal) I ended up brute forcing the problem as follows:</p>
  
  <pre><code>function mySentinel() {
      if(document.getElementById('myCheckBox').checked) {
          console.log("I've been checked!");
          return;
      }
      setTimeout("mySentinel()",100);
  }
  // then call this somewhere in the on document load section...
  mySentinel();
  </code></pre>
  
  <p>You can add some sort of timeout if you want also:</p>
  
  <pre><code>function mySentinel(var i) {
      if(document.getElementById('myCheckBox').checked) {
          console.log("I've been checked!");
          return;
      }
      if(i &lt;= 0) {
          console.log("Time out. Still not checked");
      }
      i--;
      setTimeout("mySentinel("+i+")",100);
  }
  // then call this somewhere in the on document load section...
  // 60 second timeout (some math can make the argument look nicer)
  mySentinel(600);
  </code></pre>