javascript - 复选框的更改不会触发功能

Question

我有 2 个复选框，一个选中另一个。Checkbox1 有一个更改事件。但是，当我通过 checkbox2 选中 checkbox1 时，checkbox1 上的事件没有被触发。

参见 jsfiddle .

$(document).ready(function() {
     $("#check1").change(arrangeWindow);
   $("#check2").click(function(){
      $("#check1").prop("checked", this.checked);
   });
});

function arrangeWindow() {
    console.log("Missing my baby");
}

<input type="checkbox" id="check1" value="value" />
<label for="chk">Checkbox 1</label>

<input type="checkbox" id="check2" value="value" />
<label for="chk">Checkbox 2 </label>

我可以从 check2 click 函数调用 arrangeWindow，但这并不聪明。

如何在通过 jquery 更改时触发更改事件？

Answer 1

以编程方式更改选中的属性不会在元素上引发事件。如果您需要该行为，您可以手动使用 trigger('change'):

$(document).ready(function() {
  $("#check1").change(arrangeWindow);
  $("#check2").change(function(){
    $("#check1").prop("checked", this.checked).trigger('change');
  });
});

function arrangeWindow() {
  console.log("Missing my baby");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check1" value="value" />
<label for="chk">Checkbox 1</label>

<input type="checkbox" id="check2" value="value" />
<label for="chk">Checkbox 2 </label>

另请注意，出于可访问性原因，在处理复选框和单选按钮时，您应该始终使用 change 事件，因为可以使用键盘在元素上触发该事件。