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の知識が殆ど無いため、お知恵をお貸しいただければと思います。
よろしくお願いします。
No.3
- 回答日時:
スクリプトでの実装をお考えであれば、まず以下のようなスタイルを用意して
<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 …
No.2ベストアンサー
- 回答日時:
追記の例であればこんな感じでいけます
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でここまでできるとは驚きです。
No.1
- 回答日時:
ラジオボタンは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でないと駄目だと思うのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい 1 2024/04/08 02:46
- JavaScript JavascriptでDom XSSの脆弱性対策を行いたい 2 2023/09/24 21:20
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP アマゾンのような評価の星を選択した情報を確認画面でも表示させたいです。 1 2023/10/02 10:52
- PHP PHPとHTML+Xamppの掲示板で画像も投稿できるように 3 2024/04/27 09:33
- JavaScript JavascriptでXSSの脆弱性への対策を行いたい 2 2023/08/31 22:28
- JavaScript JavaScriptで作ったアプリが正常に動作しない。改善したい。 3 2024/01/06 16:33
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンのvalueとlabelの...
-
javascript作成してます。ラジ...
-
リセットボタンでクリアできな...
-
ラジオボタンとif文
-
ラジオボタンにタブインデック...
-
ラジオボタンでdisabledとchecked
-
ラジオボタンでチェックした項...
-
ラジオボタンの値でリンク先を...
-
return trueとreturn falseの用...
-
プルダウンで選択すると、DBの...
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
ボタンを押すとチェックボック...
-
【jQuery】input nameの文字列...
-
Selectの中身をfor文で入れる
-
確認ダイアログの出し方(JavaS...
-
1つのform内に2つのsubmitボタ...
-
VB.NET DateTimeの型について
-
<input>の選択肢をプルダウンメ...
-
チェックボックスのON/OFFに応...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンにタブインデック...
-
ラジオボタンでチェックした項...
-
フォームPOST後「戻る」時のチ...
-
ラジオボタンのチェックが外れ...
-
データベースの値を判断してラ...
-
javascript作成してます。ラジ...
-
ラジオボタンを使って、検索ペ...
-
ラジオボタンでdisabledとchecked
-
チェックされたラジオボタンに...
-
ラジオボタンにチェックを入れ...
-
(jQuery)ラジオボタン選択値を...
-
クイズの正解(○×)をテキスト...
-
radio選択をクッキーに保存させ...
-
jsでラジオボタンによって表示...
-
ボタンの無効化
-
ラジオボタンで入力フィールド...
-
Jvasvriptのlengthで個数が取得...
-
ポップアップウインドウで選択...
-
ラジオボタンでの動的項目の変...
-
VBA IE ラジオボタンに...
おすすめ情報




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