javascriptを使ってラジオボタンで本文の内容を切り替えたいです

javascriptのお詳しい方にお願いがあります。

例えば

<input type="radio" name="choice"><label>選択1</label>
<input type="radio" name="choice"><label>選択2</label>
<input type="radio" name="choice ><label>選択3</label>

というボタンがあって、以下のような内容があった場合に

<p>本文本文本文
<span class="moji1">選択1の内容</span>
<span class="moji2">選択2の内容</span>
<span class="moji3">選択3の内容</span>
本文本文本文
<span class="moji1">選択1の内容</span>
<span class="moji2">選択2の内容</span>
<span class="moji3">選択3の内容</span>
本文本文本文本文本文。</p>

という内容（html）で「class="moji1」は最初から表示されていて、ボタンに応じてそれぞれに対応する（「選択2」が選択されたら「class="moji2"」）する内容だけが表示されるjavascriptはどう書けばよいのでしょうか？

いろいろjavascriptを紹介しているページを見ているのですが、これと言ったものがなく、またjavascriptの知識が殆ど無いため、お知恵をお貸しいただければと思います。
よろしくお願いします。

質問者からの補足コメント

• 

  CSSでのご提案をいただきありがとうございます。とても参考になります。
  しかし、<ul>や<div>などでそれぞれ囲まれていたり、階層が親子関係になる場合にはCSSでは対応できないのです。
  なので、javascriptでの実装を考えています。

    補足日時：2024/08/05 19:56

No.2 ベストアンサー 回答者： yambejp 回答日時： 2024/08/05 20:14

追記の例であればこんな感じでいけます

body:has([name=choice][value=moji1]:not(:checked)) .moji1{display:none}
body:has([name=choice][value=moji2]:not(:checked)) .moji2{display:none}
body:has([name=choice][value=moji3]:not(:checked)) .moji3{display:none}

この回答へのお礼

ご回答ありがとうございます。素晴らしい!!
確かにこれなら階層関係なく動きますね!
ついでに教えていただければありがたいのですが、例えば
<ul>
<li><label><input type="radio" name="choice" value="moji1" checked>選択1</label></li>
<li><label><input type="radio" name="choice" value="moji2" >選択2</label></li>
<li><label><input type="radio" name="choice" value="moji3">選択3</label></li>
</ul>
という場合で、チェックが入ったらラベルの背景を変えたり、ボーダーを入れたりする場合のCSSはどうなるのでしょうか？
もし、よろしければお教えただければと思います。

それにしてもCSSでここまでできるとは驚きです。

お礼日時：2024/08/05 20:33

No.3 回答者： Ogre7077 回答日時： 2024/08/06 14:45

スクリプトでの実装をお考えであれば、まず以下のようなスタイルを用意して

<p class=honbun>
AAA
<span>BBB</span> ← 非表示
<span class="selected">CCC</span> ← 表示
</p>
<style>
.honbun span { display:none; } ← 非表示
.honbun span.selected { display:initial; } ← 表示
</style>

ページが読み込まれたり(load)、選択肢が変わったり(change)等の機会に、スクリプトにて selected のクラス名を付け外しをしましょう

let v = document.querySelector("input[name=choice]:checked").value;
document.querySelectorAll(".honbun span").forEach(c => c.classList.toggle("selected", c.classList.contains(v)));

ラベルのスタイルも変えたいならば、同様にラベルもクラス名を付け外しをしましょう

参考)
https://developer.mozilla.org/ja/docs/Web/CSS/di …
https://developer.mozilla.org/ja/docs/Web/API/El …
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Learn/Java …

この回答へのお礼

ご回答ありがとうございます。
まだ、試せてはいないのですが是非1度試してみたいと思います。
ありがとうございました。

お礼日時：2024/08/07 09:30

No.1 回答者： yambejp 回答日時： 2024/08/05 18:49

ラジオボタンはvalueを指定してください。

この程度の話であればjavascriptはいりません

<style>
label:has([name=choice][value=moji1]:not(:checked)) ~ * .moji1{display:none}
label:has([name=choice][value=moji2]:not(:checked)) ~ * .moji2{display:none}
label:has([name=choice][value=moji3]:not(:checked)) ~ * .moji3{display:none}
</style>

<label><input type="radio" name="choice" value="moji1" checked>選択1</label>
<label><input type="radio" name="choice" value="moji2" >選択2</label>
<label><input type="radio" name="choice" value="moji3">選択3</label>

<p>本文本文本文
<span class="moji1">選択1の内容</span>
<span class="moji2">選択2の内容</span>
<span class="moji3">選択3の内容</span>
本文本文本文
<span class="moji1">選択1の内容</span>
<span class="moji2">選択2の内容</span>
<span class="moji3">選択3の内容</span>
本文本文本文本文本文。</p>

この回答へのお礼

ご回答ありがとうございます。とても参考になります。
ただ、今回は私の例えが悪かった（簡素化しすぎた）からだと思いますが、以下のような場合（「本文」がいろいろな階層に出てくる）ではCSSでは対応できないように思います。

<div class="change">
<ul>
<li><label><input type="radio" name="choice" value="moji1" checked>選択1</label></li>
<li><label><input type="radio" name="choice" value="moji2" >選択2</label></li>
<li><label><input type="radio" name="choice" value="moji3">選択3</label></li>
</ul>
</div>

<div class="honbun">
<p>本文本文本文
<span class="moji1">選択1の内容</span>
<span class="moji2">選択2の内容</span>
<span class="moji3">選択3の内容</span>
本文本文本文
<span class="moji1">選択1の内容</span>
<span class="moji2">選択2の内容</span>
<span class="moji3">選択3の内容</span>
本文本文本文本文本文。</p>
</div>

<div class="block"><!------←上と階層が違う--------->
<div class="honbun">
<p>本文本文本文
<span class="moji1">選択1の内容</span>
<span class="moji2">選択2の内容</span>
<span class="moji3">選択3の内容</span>
本文本文本文
<span class="moji1">選択1の内容</span>
<span class="moji2">選択2の内容</span>
<span class="moji3">選択3の内容</span>
本文本文本文本文本文。</p>
</div>
</div>

やっぱりjavascriptでないと駄目だと思うのです。

お礼日時：2024/08/05 20:04