JQuery triggers the change event of radio or checkbox.

Source: Internet
Author: User

In the morning, a function is required. When the checkbox is selected, hidden layers are displayed. When the checkbox is deselected, the selected layers are hidden.
The initial code is as follows:
Copy codeThe Code is as follows:
$ (Function (){
$ ("# Ischange"). change (function (){
Alert ("checked ");
});
});

After a long time, I did not respond at all. Baidu, some people pointed out that the above lines of code can run normally in Firefox and other browsers, that is, a dialog box will pop up when you select the check box or cancel the check box, but it does not run normally in IE, that is, the check box selected or canceled does not pop up immediately.

You must click any place except the check box after you select or cancel the check box. It is said that IE will wait until the check box loses focus to trigger the change event.
The improved code is as follows:
Copy codeThe Code is as follows:
$ (Function (){
If ($. browser. msie ){
$ ('Input: checkbox'). click (function (){
This. blur ();
This. focus ();
});
};
$ ("# Ischange"). change (function (){
Alert ("checked ");
});
});

Supplement: After changing the value of the check box, IE is waiting for the loss of focus, but the click event is triggered immediately. Therefore, the click event will cause the check box to lose focus, which will trigger the chang event, then, the focus is re-transferred to the check box.
For radio, replace checkbox with radio.

In JQuery, when a change event is added to radio or checkbox, if its value changes, the change event is triggered, just as we write the following code in HTML:
Copy codeThe Code is as follows:
<Input type = "checkbxo" id = "testCheckbox" onchange = "myfunction ()" name = "fruits">,

The JQuery code is as follows:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("TestCheckbox"). change (function (){
Alert ("Option changed! ");
});
});

The above code can run normally in Firefox and other browsers. That is, when you select the check box or cancel the check box, a dialog box will pop up, but it will not run normally in IE, that is, if you select or cancel the check box, the dialog box does not pop up immediately. You must click any place except the check box after you select or cancel the check box, it is said that the change event will be triggered only when the check box loses focus. This problem is not fixed yet, but some people on the Internet have already provided a solution:
Copy codeThe Code is as follows:
$ (Function () {if ($. browser. msie) {$ ('input: checkbox '). click (function () {this. blur (); this. focus ();});}});

The above Code applies to radio as long as the checkbox is used. 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 triggered immediately, therefore, the click Event causes the check box to lose focus, which triggers the chang event and transfers the focus to the check box again. Some may ask why the click event is not directly used to replace the change event. For the checkbox, The click Event and change can both complete the same function, but it is different for radio, you can click the same radio continuously without changing the value. In this case, the click event will not be triggered.

Related Article

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.