JavaScript でラジオ ボタンのチェック イベントとチェック解除イベントの両方を処理する方法は?

Barbara Streisand
リリース: 2024-10-31 05:31:30
オリジナル
625 人が閲覧しました

How to Handle Both Check and Uncheck Events for Radio Buttons in JavaScript?

ラジオ ボタンの OnChange イベント: チェック イベントとチェック解除イベントの処理

ラジオ ボタンを使用する場合、チェック イベントとチェック解除イベントの両方を効果的に処理することが重要です。標準の onChange イベントは、ラジオ ボタンが選択された場合にのみトリガーされるため、これには対応していません。これにより、前の選択がいつ選択解除されたかを識別する際にギャップが残ります。

OnChange イベントの回避策:

次のコード スニペットを検討してください:

<code class="js">var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}</code>
ログイン後にコピー

このスクリプトは、目的の目的を達成します。動作:

  1. すべてのラジオ ボタンを反復します。
  2. ラジオ ボタンごとに、イベント リスナーが onChange イベントに追加されます。
  3. ラジオ ボタンがチェックされている場合、以前にチェックされたラジオ ボタン (存在する場合) の値がログに記録され、現在チェックされているラジオ ボタンへの参照が更新されます。

このソリューションは、チェック イベントとチェック解除イベントの両方をキャプチャし、次のことを可能にします。以前と現在チェックされているラジオ ボタンの値の両方にアクセスします。

OnClick イベントの制限:

onClick イベントは、ブラウザ間でより一貫性がありますが、未チェック イベントのキャプチャの問題にはまだ対処していません。 。したがって、特定のユースケースでは考慮されるかもしれませんが、ラジオ ボタンでチェック イベントとチェック解除イベントの両方を処理するための完全なソリューションではありません。

以上がJavaScript でラジオ ボタンのチェック イベントとチェック解除イベントの両方を処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート