मैं इस चेकबॉक्स व्यवहार को कैसे समझ सकता हूं?

Question

यहां मेरा एचटीएमएल है:

<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 है।

जब चेकबॉक्स को माउस के साथ क्लिक किया जाता है तो इसे तुरंत चेक किया जाता है - यानी, अलर्ट "चेक" प्रदर्शित करता है। हालांकि जब बटनों में से एक क्लिक किया जाता है, जो अप्रत्यक्ष रूप से चेकबॉक्स पर क्लिक विधि को कॉल करता है, के बाद तक चेकबॉक्स क्लिक नहीं किया जाता है, क्लिक कोड चलाया जाता है।

इसका परीक्षण करने के लिए, माउस के साथ दो बार चेक बॉक्स पर क्लिक करें और आपको क्रमशः "चेक" और "चेक नहीं किया गया" अलर्ट दिखाई देगा। "चालू" पर क्लिक करें और आपको "चेक नहीं किया गया" अलर्ट दिखाई देगा, और फिर चेकबॉक्स चेक हो जाएगा। यदि आप फिर "ऑफ" पर क्लिक करते हैं तो आपको "चेक" दिखाई देगा, इसके बाद चेकबॉक्स स्वयं को अनचेक कर देगा।

इस व्यवहार का कारण क्या है? मैं कैसे सुनिश्चित कर सकता हूं कि माउस व्यवहार के अनुसार क्लिक श्रोता कोड कहने से पहले चेकबॉक्स "चेकिंग" होता है?