このチェックボックスの動作を理解するにはどうすればよいですか？ここ

Question

は私のHTMLです：

<input class='user_roles' id="chk" type=checkbox />
<input id="btn_on" type="button" value="on" />
<input id="btn_off" type="button" value="off" />

そして、私のjQuery：

$('#chk').click(function() { 
    if($(this).prop("checked") === true) { 
     alert ("checked"); 
    } 
    else{ 
     alert ("not checked"); 
    } 
}); 

$("[id$=btn_on]").click(function() { 
    $('#chk').click(); 
}); 

$("[id$=btn_off]").click(function() { 
    $('#chk').click(); 
}); 

実施例はhereです。

このチェックボックスをマウスでクリックすると、すぐにチェックされます。つまり、アラートは「チェック済み」と表示されます。ただし、チェックボックスのclickメソッドを間接的に呼び出すボタンの1つがクリックされた場合、のクリックコードが実行された後に、チェックボックスはクリックされません。

これをテストするには、マウスで数回チェックボックスをクリックすると、アラートがそれぞれ「チェックされた」と「チェックされていません」と表示されます。 「オン」をクリックすると、「チェックされていません」というアラートが表示され、チェックボックスがオンになります。 "Off"をクリックすると "checked"が表示され、続いてチェックボックスがオフになります。

この動作の理由は何ですか？マウスビヘイビアのように、クリックリスナーコードが呼び出される前に「チェック」チェックボックスが確実に行われるようにするにはどうすればよいですか？