復選框的更改不會觸發功能

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函數調用rangingWindow，但這並不明智。

通過jquery更改后如何觸發change事件？

Answer 1

以編程方式更改checked屬性不會在元素上引發事件。 如果您需要該行為，則可以手動使用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事件，因為可以使用鍵盤在元素上觸發該事件。