Home >Web Front-end >JS Tutorial >JQuery triggers the change event of radio or checkbox_jquery

JQuery triggers the change event of radio or checkbox_jquery

WBOY
WBOYOriginal
2016-05-16 17:46:221342browse

I want to make a function this morning. When the checkbox is selected, the hidden layer will be displayed. When the checkbox is deselected, the selected layer will be hidden.
The initial code is as follows:

Copy code The code is as follows:

$(function() {
$("#ischange").change(function() {
alert("checked");
});
}); After waiting for a long time, there was no response at all. After searching on Baidu, some experts pointed out that the above lines of code can run normally in browsers such as Firefox, that is, a dialog box will pop up if you select or cancel the check box, but it will not execute normally in IE, that is, Checking or deselecting a checkbox does not immediately pop up a dialog box.
You must select or cancel the checkbox before clicking anywhere except the checkbox. It is said that this is because IE will wait until the checkbox loses focus before triggering the change event.
The improved code is as follows:



Copy code The code is as follows: $(function (){
if ($.browser.msie) {
$('input:checkbox').click(function () {
this.blur();
this.focus() ;
});
};
$("#ischange").change(function() {
alert("checked");
});
}) ;



Additional
: After changing the value of the check box, IE is waiting for the focus to be lost, but the click event is triggered immediately, so the click event is used to make the check box lose focus, this will trigger the change event, and then transfer the focus back to the check box.
If it is radio, just replace the checkbox with radio. In JQuery, when adding a change event to a radio or checkbox, the change event will be triggered if its value changes, just like we write the following code in HTML:




And the code we use JQuery is as follows:


Copy code The code is as follows: $(document).ready(function(){
$("testCheckbox").change(function() {
alert("Option changed !");
});
});


The above code can run normally in browsers such as Firefox, that is, when you select the check box or cancel the check box, it will A dialog box pops up, but it does not work properly in IE. That is, the dialog box does not pop up immediately when you select or cancel the check box. You must select or cancel the check box before clicking anything except the check box. One place, the reason for this is said to be because IE will wait until the check box loses focus before triggering the change event. Currently, this problem has not been fixed, but some experts on the Internet have provided a solution:


Copy code The code is as follows: $(function () {if ($.browser.msie) {$(' input:checkbox').click(function () { this.blur(); this.focus(); }); }});

The above code can be applied to radio as long as the checkbox is added , 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, so the click event is used to make the check box lose focus, which will trigger the change event, and then Then shift the focus back to the checkbox. Some people may ask why not directly use the click event to replace the change event. For checkbox, both click event and change can complete the same function, but it is different for radio. You can continuously click the same radio to change the value. No change, then the click event will continue to be triggered but the change event will not be triggered.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn