代码之家  ›  专栏  ›  技术社区  ›  Kaleem Nalband

使用javascript更改输入[复选框或单选按钮]时如何获取(或触发)更改事件

  •  1
  • Kaleem Nalband  · 技术社区  · 8 年前

    我有以下设置,当我通过单击标签或复选框本身选中/取消选中复选框时,更改事件触发,

    但是当我尝试使用javascript(比如clciking按钮)选中/取消选中复选框时,该复选框将选中或取消选中,但会更改未触发的事件。

    请检查下面的代码

    var checkbox=document.getElementById("check");
      
    checkbox.addEventListener("change",function(){window.alert("change event")})
    
    document.getElementsByTagName("button")[0].addEventListener("click",function(){
      checkbox.checked ? checkbox.checked=false : checkbox.checked=true;
    })
    <label><input type=checkbox id=check>this is label</label><br>
    <button>toggle checkbox</button>

    为什么会这样?以及如何在使用javascript进行更改时获取更改事件。

    2 回复  |  直到 8 年前
        1
  •  2
  •   Ankit Agarwal    8 年前

    为什么是三元条件?只使用 checkbox.click(); 就这么简单。它将在触发 change 事件。

    var checkbox = document.getElementById("check");
    
    checkbox.addEventListener("change", function() {
      window.alert("change event")
    })
    
    document.getElementsByTagName("button")[0].addEventListener("click", function() {
      checkbox.click();
    })
    <label><input type=checkbox id=check>this is label</label><br>
    <button>toggle checkbox</button>
        2
  •  1
  •   Telmo Trooper    8 年前

    好吧,您可以将您的逻辑分离成另一个函数,然后在复选框的“Change”和按钮的“Click”上触发该函数。

    var checkbox = document.getElementById("check");
    
    checkbox.addEventListener("change", function() {
      yourFunction()
    });
    
    document.getElementsByTagName("button")[0].addEventListener("click", function() {
      checkbox.checked ? checkbox.checked = false : checkbox.checked = true;
      yourFunction()
    });
    
    function yourFunction() {
      window.alert("change event")
    }
    

    这不能解决你的问题吗?我相信 Ankit Agarwal's answer 但与你最初的意图更好地一致。