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í),再隱藏選中的層。
初始代碼如下:
$(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)之后的代碼如下:
$(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中寫入下代碼:
<input type="checkbxo" id="testCheckbox" onchange="myfunction()"name="fruits">,
而我們用JQuery的代碼如下:
$(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)提供了解決方案:
$(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事件。
初始代碼如下:
復(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中寫入下代碼:
復(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事件。
您可能感興趣的文章:
- JS檢測(cè)頁(yè)面中哪個(gè)HTML標(biāo)簽觸發(fā)點(diǎn)擊事件的方法
- 解決Js先觸發(fā)失去焦點(diǎn)事件再執(zhí)行點(diǎn)擊事件的問(wèn)題
- javascript觸發(fā)模擬鼠標(biāo)點(diǎn)擊事件
- jquery 觸發(fā)a鏈接點(diǎn)擊事件解決方案
- jquery mobile的觸控點(diǎn)擊事件會(huì)多次觸發(fā)問(wèn)題的解決方法
- jQuery第一次運(yùn)行頁(yè)面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例
- jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法
- 解決jQuery ajax動(dòng)態(tài)新增節(jié)點(diǎn)無(wú)法觸發(fā)點(diǎn)擊事件的問(wèn)題
- JQuery觸發(fā)事件例如click
- jQuery事件的綁定、觸發(fā)、及監(jiān)聽(tīng)方法簡(jiǎn)單說(shuō)明
- javascript/jquery實(shí)現(xiàn)點(diǎn)擊觸發(fā)事件的方法分析
相關(guān)文章
Jquery on綁定的事件 觸發(fā)多次實(shí)例代碼
下面小編就為大家?guī)?lái)一篇Jquery on綁定的事件 觸發(fā)多次實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12Jquery1.9.1源碼分析系列(十五)動(dòng)畫處理之外篇
這篇文章主要介紹了Jquery1.9.1源碼分析系列(十五)動(dòng)畫處理之外篇 的相關(guān)資料,需要的朋友可以參考下2015-12-12使用jQuery mobile庫(kù)檢測(cè)url絕對(duì)地址和相對(duì)地址的方法
這篇文章主要介紹了使用jQuery mobile庫(kù)監(jiān)測(cè)絕對(duì)地址和相對(duì)地址的方法,分別是isAbsoluteUrl()和isRelativeUrl()方法的使用,需要的朋友可以參考下2015-12-12jQuery使用contains過(guò)濾器實(shí)現(xiàn)精確匹配方法詳解
這篇文章主要介紹了jQuery使用contains過(guò)濾器實(shí)現(xiàn)精確匹配的方法,結(jié)合實(shí)例形式分析了contains過(guò)濾器的具體使用技巧,需要的朋友可以參考下2016-02-02使用jquery讀取html5 localstorage的值的方法
在HTML 5中,localstorage是個(gè)不錯(cuò)的東西,在支持localstorage的瀏覽器中, 能持久化用戶表單的輸入,即使關(guān)掉瀏覽器,下次重新打開(kāi)瀏覽器訪問(wèn),也能讀出其值,很不錯(cuò)的一個(gè)東西,接下來(lái)實(shí)例介紹,需要的朋友可以參考下2013-01-01jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法
這篇文章主要介紹了jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法,對(duì)比分析了bind與live方法,說(shuō)明了live方法在處理新增元素時(shí)的作用,需要的朋友可以參考下2016-05-05jQuery實(shí)現(xiàn)移動(dòng)端滑塊拖動(dòng)選擇數(shù)字效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)移動(dòng)端滑塊拖動(dòng)選擇數(shù)字效果,jQuery實(shí)現(xiàn)移動(dòng)端滑塊拖動(dòng)效果,感興趣的小伙伴們可以參考一下2015-12-12