当从 javascript 代码中强制检查复选框时，复选框 onchange 函数不会触发答案

【问题标题】：Checkbox onchange function does not firing when force check checkbox from javascript code当从 javascript 代码中强制检查复选框时，复选框 onchange 函数不会触发
【发布时间】：2019-08-26 01:36:41
【问题描述】：

我有一个输入类型密码来输入密码，并且有一个显示密码复选框可以将输入类型密码更改为文本，因此输入密码字符是可见的。还有随机密码按钮，用于随机化密码并选中复选框以在单击按钮时显示密码。

问题是当单击随机密码按钮触发 JavaScript 代码以检查显示密码复选框时，onchange 复选框功能不会触发/运行。这是我的代码

    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 < length; i++){
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      return text;
    }

    <span> Password </span>
    <input type="password" name="password" id="staff-password" maxlength="6" value="">
    <br/>
    <input type="checkbox" onchange="togglePassword(this)" id="show-password" >
    <span style="margin-left:3px;">Show Password</span>
    <br/>
    <button type="button" id="random-password" onclick="clickRandom()">
      <span>Random password</span>
    </button>

【问题讨论】：

HTML 文件中的脚本标签在哪里。试着把它放在最后。并将你的 JavaScript 包装在函数 ready(){你的代码在这里}
尝试在togglePassword中使用=== if
在这种情况下，您可以在 clickRandom() 中调用 togglePassword :-)

标签： javascript html

【解决方案1】：

这是正确的，表单字段状态的动态更新不会导致用户交互引发的典型事件。相反，您可以自己手动调用回调。

查看 cmets 内联

function togglePassword(checkbox) {
        var x = document.getElementById("staff-password");
        if (checkbox.checked == true){
          x.type = "text";
        } else {
          x.type = "password";
        }
    }
    
    function clickRandom(){ 
      // value is a property, you have to assign it a value:
      document.getElementById("staff-password").value = randomPass();
      document.getElementById("show-password").checked = true;
      togglePassword(document.getElementById("show-password")); // Manually call the toggle function
    }
    
    function randomPass() {
      var length = 6;
      var text = "";
      var possible = "3907154628";
      for (var i = 0; i < length; i++){
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      return text;
    }

<span> Password </span>
    <input type="password" name="password" id="staff-password" maxlength="6" value="">
    <br/>
    <input type="checkbox" onchange="togglePassword(this)" id="show-password" >
    <span style="margin-left:3px;">Show Password</span>
    <br/>
    <button type="button" id="random-password" onclick="clickRandom()">
      <span>Random password</span>
    </button>

【讨论】：