1. ホーム
  2. ジャバスクリプト

[解決済み】ラジオボタン(INPUT type="radio")のOnChangeイベントハンドラが1つの値として動作しない。

2022-04-03 10:30:46

質問

一般化された解決策を探しています。

同じ名前の2つのラジオ型入力を考える。送信されたとき、チェックされている方が、フォームと一緒に送信される値を決定します。

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

ラジオボタンの選択が解除されてもchangeイベントは発生しません。つまり、value="1"のラジオがすでに選択されていて、ユーザーが2つ目を選択した場合、handleChange1()は実行されないのです。これは、この選択解除をキャッチすることができるイベントがないという問題を(とにかく私にとって)提示します。

チェックボックスグループの値のonchangeイベント、またはラジオがチェックされたときだけでなく、チェックが外されたときにも検出するoncheckイベントの回避策を希望しています。

この問題に遭遇したことのある方もいらっしゃるのではないでしょうか?何か回避策はありますか(あるいは、理想的にはこれを処理する正しい方法は何ですか)?私はちょうど変更イベントをキャッチし、以前にチェックされたラジオと同様に新しくチェックされたラジオにアクセスしたいです。

追伸

onclickは、ラジオがチェックされたことを示すより良い(クロスブラウザ)イベントのようですが、それはまだチェックされていない問題を解決するものではありません。

チェックボックスタイプのonchangeがこのようなケースで機能するのは、チェックしたり外したりするときに送信する値を変更するためだと考えれば納得がいきます。ラジオボタンがもっとSELECT要素のonchangeのように動作してくれればいいのですが、どうしたものか...。

どのように解決するのですか?

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)
    });
}
<form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form>

JSFiddleのデモを紹介します。 https://jsfiddle.net/crp6em1z/