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

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

Jun 21, 2016 am 09:48 AM

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) {$('input:checkbox').click(function () { this.blur(); this.focus(); }); }});
ログイン後にコピー

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

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

< meter>の目的は何ですか 要素?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

< datalist>の目的は何ですか 要素?

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

< Progress>の目的は何ですか 要素?

See all articles