ホームページ  >  記事  >  ウェブフロントエンド  >  ラジオやチェックボックスの変更イベントをトリガーするJQueryの詳細説明

ラジオやチェックボックスの変更イベントをトリガーするJQueryの詳細説明

PHP中文网
PHP中文网オリジナル
2016-06-21 09:48:272569ブラウズ

JQuery では、ラジオまたはチェックボックスに変更イベントを追加するときに、その値が変更されると変更イベントがトリガーされます。この記事では、JQuery を使用してチェックボックスの変更イベントをトリガーする方法を詳しく紹介します。参考にしてください

朝 機能を実行するには、チェックボックスをオンにすると非表示のレイヤーが表示され、チェックボックスをオフにすると選択したレイヤーが非表示になります。
初期のコードは次のとおりです:

コードは次のとおりです:

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


長時間いじっても、まったく応答がありませんでした。 Baidu で検索したところ、専門家は、上記のコード行は Firefox などのブラウザでは正常に実行できる、つまり、チェック ボックスを選択またはキャンセルするとダイアログ ボックスが表示されますが、IE では正常に実行されないことを指摘しました。つまり、チェックボックスをオンまたはオフにしても、ダイアログ ボックスはすぐには表示されません。

チェック ボックス以外の場所をクリックする前に、チェック ボックスを選択またはキャンセルする必要があります。これは、IE が変更イベントをトリガーする前にチェック ボックスがフォーカスを失うまで待機するためであると言われています。
改善されたコードは次のとおりです:

コードは次のとおりです:

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


追加: チェック ボックスの値が変更されると、IE はフォーカスを失うのを待機しますが、クリック イベントはすぐにトリガーされます。そのため、クリック イベントを使用して、チェック ボックスがフォーカスを失うようにします。そのため、change イベントがトリガーされ、フォーカスがチェック ボックスに戻ります。
ラジオの場合は、チェックボックスをラジオに置き換えるだけです。

JQuery では、ラジオまたはチェックボックスに変更イベントを追加するときに、その値が変更されると、HTML で次のコードを記述するのと同じように、変更イベントがトリガーされます:

コードは次のとおりです:

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

JQuery を使用するコードは次のとおりです:

コードは次のとおりです:

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


上記のコードは、Firefox などのブラウザーで通常どおり実行できます。つまり、チェック ボックスをオンにしたり、チェック ボックスをキャンセルしたりすると、ダイアログ ボックスが表示されますが、IE では正常に実行されません。つまり、チェック ボックスをオンまたはキャンセルしても、ダイアログ ボックスはすぐには表示されません。この理由は、IE が変更イベントをトリガーする前にチェック ボックスがフォーカスを失うまで待機するためであると言われています。現在、この問題は修正されていませんが、インターネット上の一部の専門家が解決策を提供しています。

コードは次のとおりです:

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

上記のコードを置き換えるだけです。 チェックボックスをラジオに適用できます。 上記のコードの原理は、チェックボックスの値が変更されると、IE はフォーカスが失われるのを待機することです。ただし、クリック イベントはすぐにトリガーされるため、クリック イベントを使用してチェック ボックスのフォーカスを失うため、change イベントがトリガーされ、フォーカスがチェック ボックスに戻ります。チェックボックスの場合は、クリック イベントと変更イベントの両方で同じ機能を実行できますが、ラジオの場合は異なります。同じラジオをクリックし続けて値を変更できます。変化がない場合、クリック イベントは引き続きトリガーされますが、変更イベントはトリガーされません。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。