title: Checkbox onchange function does not firing when force check checkbox from javascript code
body: <p>I have an input type password to enter password, and there is a show password checkbox to change the input type password to text, so the input password character is visible. There is also random password button to randomize the password and check the checkbox to show the password when the button clicked.</p>
  
  <p>The problem is when clicking the random password button to fire JavaScript code to check the show password checkbox , the <code>onchange</code> checkbox function doesn't triggered/running. here's my 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>    function togglePassword(checkbox) {
          var x = document.getElementById("staff-password");
          if (checkbox.checked == true){
            x.type = "text";
          } else {
            x.type = "password";
          }
      }
      
      function clickRandom(){ 
        var randomPass = randomPass();
        document.getElementById("staff-password").value(randomPass);
        document.getElementById("show-password").checked = true;
      }
      
      function randomPass() {
        var length = 6;
        var text = "";
        var possible = "3907154628";
        for (var i = 0; i &lt; length; i++){
          text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        return text;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;span&gt; Password &lt;/span&gt;
      &lt;input type="password" name="password" id="staff-password" maxlength="6" value=""&gt;
      &lt;br/&gt;
      &lt;input type="checkbox" onchange="togglePassword(this)" id="show-password" &gt;
      &lt;span style="margin-left:3px;"&gt;Show Password&lt;/span&gt;
      &lt;br/&gt;
      &lt;button type="button" id="random-password" onclick="clickRandom()"&gt;
        &lt;span&gt;Random password&lt;/span&gt;
      &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>