急いでいます！

javascript 複数のラジオボタンによって制御する文字列の表示

解決済

質問者：mintohime
質問日時：2020/10/18 23:30
回答数：1件

2つのラジオボタンが変更され、又、初期値に戻った時の制御について教えてください。

<form name="form1" id="form1">
<div>
<input type="radio" name="sel1" id="sel1" value="0">111
<input type="radio" name="sel1" id="sel1" value="1" checked>222
</div>
<div>
<input type="radio" name="sel2" id="sel1" value="0" checked>AAA
<input type="radio" name="sel2" id="sel1" value="1">BBB
</div>
<span name="status" id="status">あいうえお</span>
-----------------
sel1=1「222」、sel2=0「AAA」　の選択が初期値で、statusに「あいうえお」と表示されています。
フォーム内で、sel1、又は、sel2が変更された際に、statusの「あいうえお」の文字を
「変更中」と表示し、初期値の、sel1=1「222」、sel2=0「AAA」の選択状態に戻った時は、
statusの文字列も初期値の「あいうえお」と表示を戻したいです。

どのようにJavascriptで制御すればよろしいでしょうか。
宜しくお願い致します。

sel1とsel2は、データベースから読み込んでいますので
初期値で表示される文字は、sel1とsel2の選択内容によって違います。
ですので全てが「あいうえお」が初期値の固定ではありません。

いずれにしましても、選択内容が変更されたら「変更中」、元に戻ったら初期値の文字列に
戻すという処理がしたいです。
宜しくお願い致します。

補足日時：2020/10/19 00:00
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2020/10/19 09:32

こんにちは

初期の状態にどれだけのバリエーションがあり得るのか不明なので、かなり適当ですが・・・

※ デフォルトのチェックと比較していますので、「初期設定でチェックのないボタン群」が存在すると、一旦チェックした後は、二度と初期状態には戻らないことになります。
※ ご質問には関係ありませんが、ご提示のHTMLの「id="sel1"」は文法違反になるので、止めた方がよろしいでしょう。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
</head>
<body>
<form name="form1" id="form1">
<div>
<input type="radio" name="sel1" value="0" />111
<input type="radio" name="sel1" value="1" checked />222
</div>
<div>
<input type="radio" name="sel2" value="0" checked />AAA
<input type="radio" name="sel2" value="1" />BBB
</div>
<span name="status" id="status">あいうえお</span>
</form>

<script>
{
let frm = document.getElementById('form1');
let st = document.getElementById('status'), sv = st.textContent;

frm.addEventListener('change', ()=>{
let f = true;
frm.querySelectorAll('input[type="radio"]:checked')
.forEach( e=>{ f *= e.defaultChecked; });
st.textContent = f?sv:'変更中';
});
}
</script>
</body>
</html>