[解決済み】ラジオボタン(INPUT type="radio")のOnChangeイベントハンドラが1つの値として動作しない。
質問
一般化された解決策を探しています。
同じ名前の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/
関連
-
[解決済み】JavaScriptで「無効な日付」のDateインスタンスを検出する
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] ループ内のJavaScriptクロージャ - シンプルな実用例
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] jQuery get specific option tag text
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] HTMLのチェックボックスのchecked属性の適切な値は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】SyntaxError: 期待された式が、'<'を得た。
-
[解決済み】 \u003C とは何ですか?