jquery triggers the Change event for a radio or checkbox _jquery

Source: Internet
Author: User
To do a function in the morning, when the checkbox is selected, the hidden layer is displayed, and when unchecked, the selected layer is hidden.
The initial code is as follows:
Copy Code code as follows:

$ (function () {
$ ("#ischange"). Change (function () {
Alert ("Checked");
});
});

Churn for a long time, unexpectedly a little reaction is not. Baidu, there is a high point of the above several lines of code in Firefox and other browsers can be normal operation, that is, you select the check box or cancel check box will pop up a dialog box, but in IE will not be normal execution, that is, select or Cancel check box will not immediately pop-up dialog box.

You must click anywhere other than the check box after selecting or canceling the check box, because IE will not trigger the Change event until the check box loses focus.
The improved code is as follows:
Copy Code code as follows:

$ (function () {
if ($.browser.msie) {
$ (' Input:checkbox '). Click (function () {
This.blur ();
This.focus ();
});
};
$ ("#ischange"). Change (function () {
Alert ("Checked");
});
});

Supplements: When the value of the checkbox is changed, ie waits to lose focus, but the Click event is triggered immediately, so use the Click event to lose focus on the checkbox, which triggers the Chang event and then shifts the focus back to the check box.
If it is radio, replace the checkbox with radio.

In jquery, when you add a change event to a radio or checkbox, if its value changes, it triggers the changing event, just as we write the code in HTML:
Copy Code code as follows:

<input type= "Checkbxo" id= "Testcheckbox" onchange= "MyFunction ()" Name= "Fruits" ",

And we use the jquery code as follows:
Copy Code code as follows:

$ (document). Ready (function () {
$ ("Testcheckbox"). Change (function () {
Alert ("option changed!");
});
});

The above code in Firefox and other browsers can work, that is, when you select the check box or cancel check box will pop up a dialog box, but in IE will not be normal execution, that is, you select or Cancel check box will not immediately pop-up dialog box, You have to select or cancel the check box and then click anywhere other than the check box, so it is said that because IE will wait until the check box has lost focus will trigger the change event, the current problem has not been repaired, but the network has a high man has provided the solution:
Copy Code code as follows:

$ (function () {if ($.browser.msie) {$ (' Input:checkbox '). Click (function () {This.blur (); This.focus ();});}};

The above code as long as the checkbox can be applied to radio, the principle of the above code is: when the value of the check box is changed, ie is waiting to lose focus, but the Click event is immediately triggered, so use the Click event to let the checkbox lose focus, which will trigger the Chang event, Then the focus is transferred back to the check box. One may ask why you do not use the Click event directly instead of the change event, and for a checkbox, click events and changes can accomplish the same function, but for radio, you can click the same radio continuously and the value is unchanged. This will trigger the Click event without triggering the change event.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.