快捷導(dǎo)航

JQuery觸發(fā)radio或checkbox的change事件

更新時(shí)間：2012年12月18日 14:57:11 作者：

在JQuery中，當(dāng)給radio或checkbox添加一個(gè)change事件時(shí)，如果它的值發(fā)生變化就會(huì)觸發(fā)change事件;本文將詳細(xì)介紹如何利用JQuery觸發(fā)Checkbox的change事件需要了解的朋友可以參考下

早上要做一功能，checkbox被選中時(shí)，顯示隱藏的層，取消選中時(shí)，再隱藏選中的層。
初始代碼如下：

復(fù)制代碼代碼如下:

 
$(function(){ 
$("#ischange").change(function() { 
alert("checked"); 
}); 
}); 

搗騰了半天，竟然一點(diǎn)反應(yīng)都沒(méi)有。百度了下，有高人指出上面幾行代碼在Firefox等瀏覽器中可以正常運(yùn)行，即你選中復(fù)選框或取消復(fù)選框都會(huì)彈出一個(gè)對(duì)話框，但是在IE中卻不會(huì)正常執(zhí)行，即選中或取消復(fù)選框不會(huì)立即彈出對(duì)話框。

必須在選中或取消復(fù)選框之后再點(diǎn)擊除了復(fù)選框之外的任何一個(gè)地方，據(jù)說(shuō)是因?yàn)镮E會(huì)等到復(fù)選框失去焦點(diǎn)之后才會(huì)觸發(fā)change事件。
改進(jìn)之后的代碼如下：

復(fù)制代碼代碼如下:

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

補(bǔ)充：當(dāng)改變復(fù)選框的值后，IE在等待失去焦點(diǎn)，但是click事件是立即觸發(fā)的，因此利用click事件讓復(fù)選框失去焦點(diǎn)，這樣就會(huì)觸發(fā)chang事件了，然后再把焦點(diǎn)重新轉(zhuǎn)移到該復(fù)選框上。
如果是radio，將checkbox換成radio即可。

在JQuery中，當(dāng)給radio或checkbox添加一個(gè)change事件時(shí)，如果它的值發(fā)生變化就會(huì)觸發(fā)change事件，就如同我們?cè)?HTML中寫(xiě)入下代碼：

復(fù)制代碼代碼如下:

<input type="checkbxo" id="testCheckbox" onchange="myfunction()"name="fruits">,

而我們用JQuery的代碼如下：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
$("testCheckbox").change(function() { 
alert("Option changed!"); 
}); 
}); 

以上代碼在Firefox等瀏覽器中可以正常運(yùn)行，即當(dāng)你選中復(fù)選框或取消復(fù)選框都會(huì)彈出一個(gè)對(duì)話框，但是在IE中卻不會(huì)正常執(zhí)行，即你選中或取消復(fù)選框不會(huì)立即彈出對(duì)話框，你必須在選中或取消復(fù)選框之后再點(diǎn)擊除了復(fù)選框之外的任何一個(gè)地方，之所以這樣，據(jù)說(shuō)是因?yàn)镮E會(huì)等到復(fù)選框失去焦點(diǎn)之后才會(huì)觸發(fā)change事件，目前這個(gè)問(wèn)題還沒(méi)有被修復(fù)，不過(guò)網(wǎng)上有高人已經(jīng)提供了解決方案：

復(fù)制代碼代碼如下:

 
$(function () {if ($.browser.msie) {$('input:checkbox').click(function () { this.blur(); this.focus(); }); }}); 

以上代碼只要把checkbox就可以適用于radio, 以上代碼的原理是：當(dāng)改變復(fù)選框的值后，IE在等待失去焦點(diǎn)，但是click事件是立即觸發(fā)的，因此利用click事件讓復(fù)選框失去焦點(diǎn)，這樣就會(huì)觸發(fā)chang事件了，然后再把焦點(diǎn)重新轉(zhuǎn)移到該復(fù)選框上。有人可能會(huì)問(wèn)為什么不直接用click事件來(lái)代替change事件，對(duì)于checkbox來(lái)說(shuō)，click事件和change都可以完成同樣的功能，但是對(duì)于radio來(lái)說(shuō)就不一樣了，你可以連續(xù)點(diǎn)擊同一個(gè)radio而值不變，這時(shí)就會(huì)不停的觸發(fā)click事件而不會(huì)觸發(fā)change事件。

您可能感興趣的文章: