![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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.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.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.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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
プログラマーは誘惑にさらされる人生?
その他(プログラミング・Web制作)
-
javaScriptのコードの修正をお願いします。
JavaScript
-
プログラミングの雑談がしたいのですがどこで出来ますか?
その他(プログラミング・Web制作)
-
-
4
文系のSE志望です。プログラミングを今から習得したいのですが、初めて学ぶのにオススメの言語があれば教
その他(プログラミング・Web制作)
-
5
excelをhtmlに変換した途端、一部フォントが変わるのはなぜでしょうか。
HTML・CSS
-
6
鍵盤アプリで、スマホの画面に並んだ鍵盤をなぞった時に、触れた鍵が次々発火するようにするには
JavaScript
-
7
Javascriptエラーの原因が分からない
JavaScript
-
8
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
9
楽しくて最高のプログラミング言語を作りたいのですが、そもそもプログラミング言語を作る意味なんてないと
その他(プログラミング・Web制作)
-
10
小学1年生の子です。塾に行かせるのは難しいので、自宅で学べたらと思うのですが、子供にプログラミングを
その他(プログラミング・Web制作)
-
11
スカラーのベクトル微分
その他(プログラミング・Web制作)
-
12
オブジェクト指向プログラミングにおいて Aというクラスと Bというプロパティ(ゲッターとセッターはこ
その他(プログラミング・Web制作)
-
13
過剰なオブジェクト指向脳からの脱却について
その他(プログラミング・Web制作)
-
14
正規表現で複数マッチ条件で悩んでいます。ABCならtrueABBならfalseADCならtrueと
その他(プログラミング・Web制作)
-
15
jQueryでシンセサイザーを作っている途中なのですが、たまに指を離しても音が止まらなくなります
JavaScript
-
16
Pythonのコードエラーについてです。
その他(プログラミング・Web制作)
-
17
AIの登場でプログラマーたちが解雇されていますが
その他(プログラミング・Web制作)
-
18
逆コンパイルと逆アセンブルの違いはなんですか
C言語・C++・C#
-
19
エディターで以下のような色になるエディターは解りますか?
その他(プログラミング・Web制作)
-
20
趣味レベルでプログラミングをしたいのですがいいコミュニティとかないのでしょうか? 大抵の人はプログラ
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
任意のinput要素同士の連動につ...
-
Jvasvriptのlengthで個数が取得...
-
データベースの値を判断してラ...
-
ポップアップウインドウで選択...
-
ラジオボタンのチェックが外れ...
-
javascriptを使ってラジオボタ...
-
フォーム入力チェックの効率の...
-
<JavaScript>tableタグを入力不...
-
<input>の選択肢をプルダウンメ...
-
至急!GetElementById でtdの...
-
return trueとreturn falseの用...
-
ハイパーリンクを別ウインドウ...
-
TD内のチェックボックスの位置...
-
コピペを禁止するtextarea
-
javascriptでセレクトボックス...
-
未入力のラジオボタンに、alert...
-
value内に変数を入れたい
-
ASP エラーチェック VBScript
-
onchangeイベントを強制的に発...
-
ボタン2回押しを無効にしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンにタブインデック...
-
ラジオボタンのチェックが外れ...
-
データベースの値を判断してラ...
-
ラジオボタンでdisabledとchecked
-
javascript作成してます。ラジ...
-
フォームPOST後「戻る」時のチ...
-
リンク文字クリックでラジオボ...
-
ラジオボタンの値でリンク先を...
-
ラジオボタンのチェック数に応...
-
ラジオボタンのValueを受け取り...
-
リセットボタンでクリアできな...
-
サイト内にGoogleサイトを表示...
-
アンダーバーのname値は取得で...
-
複数のラジオボタンのチェック
-
ラジオボタンを使った簡単なア...
-
ラジオボタンで選択した項目の...
-
Jvasvriptのlengthで個数が取得...
-
チェックボックスのON/OFFに連...
-
javascriptでクイズ
-
クイズの正解(○×)をテキスト...
おすすめ情報
CSSでのご提案をいただきありがとうございます。とても参考になります。
しかし、<ul>や<div>などでそれぞれ囲まれていたり、階層が親子関係になる場合にはCSSでは対応できないのです。
なので、javascriptでの実装を考えています。