为什么 jquery 输入事件不适用于类型复选框的输入？答案

【问题标题】：Why jquery input event does not work on input with type checkbox?为什么 jquery 输入事件不适用于类型复选框的输入？
【发布时间】：2019-01-25 16:32:43
【问题描述】：

我多次使用 jquery 输入事件，总是一切正常。但最近我用它来输入类型复选框和...... 我不知道为什么它在许多版本的 Chrome 和 Firefox 中都不起作用

正如这里所写的，jquery input event on input with type text 工作正常，但输入类型复选框不起作用。

<input class="form-check-input" type="checkbox" value="" id="sampleCheck1">
<script>
     $("#sampleCheck1").on("input", function(){
          window.alert("checkbox select event fired.")
     })
</script>

// find elements
var checkbox = $("#sampleCheck1")
var textbox = $("#textbox1")


// handle click and add class
checkbox.on("input", function(){
  window.alert("checkbox 'input' event fired.")
})

textbox.on("input", function(){
  window.alert("textbox 'input' event fired.")
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 18px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 340px;
}

.form-check {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
}

.form-group{
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 16px;
  color: #fff;
  text-align: left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <p>Test 'select' event for checkbox</p>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="sampleCheck1">
    <label class="form-check-label" for="sampleCheck1">
      Checkbox Sample 
    </label>
</div>
<div class="form-group">
    <label for="textbox1">Textbox Sample</label>
    <input type="text" class="form-control" id="textbox1" >
  </div>
</div>

【问题讨论】：

复选框 input 事件似乎在 Chrome、FF 和 W10 上的 Opera 上正常触发，as it's supposed to，在什么情况下它不适合您？

标签： jquery events checkbox input

【解决方案1】：

这是 Edge 中的 a confirmed bug。您的复选框适用于 Chrome 和 Firefox（以及 Opera according to CertainPerformance），但不适用于 Edge（即使我直接使用 addEventListener 而不是使用 jQuery），并且 the specification 表示该事件应该触发，所以这将是Edge 中的错误。

在他们修复错误之前（截至 2018 年 8 月 19 日，它已分配给某人修复），与复选框一起使用的通常事件是 click（即使在切换复选框时也会触发使用键盘，而不是鼠标）。

【讨论】：

【解决方案2】：

试试这个

<script>
 $("#sampleCheck1").on("change", function(){
      window.alert("checkbox select event fired.")
 })
</script>

【讨论】：

【解决方案3】：

input 事件似乎在 JQuery 上的复选框属性更改时无法正确触发。最好改用change 事件。

$(function(){
   $("#sampleCheck1").on("change", function(){
      window.alert("checkbox select event fired.")
   });
});

您可以将此事件用于 html 文档中的所有类型的输入。

【讨论】：