前提・実現したいこと

Rails + bootstrap3 で入力フォームを作っていて

タブのような感じでラジオボタンを使い、ラジオボタンの状態によって以降の表示を切り替えたい

（UI表示はラジオボタンのまま）

送信時にはラジオボタンの状態も送信したい
ラジオボタンに bootstrap をあてたい
なるべくJSは最低限の処理だけですませたい

試したこと

ラジオ部分
<radio1><label1>
<radio2><label2>
<radio3><label3>

コンテンツ部分
<radio1'><contents1>
<radio2'><contents2>
<radio3'><contents3>

と並べて JS なしで label1 をクリックしたときに radio1 radio1' 両方を有効にはできないでしょうか

ラジオボタンをタブとして使う記事はよくでてくるのですが
ラジオボタンとコンテンツを同一階層に並べて :checked ~ * で表示を切り替える方法と
コンテンツをラジオボタンの直後に配置して :checkde+* で表示を切り替える方法がでてくるのですが
前者は bootstrap をあてるためには <div class="radio"></div> の中にラジオボタンを配置する必要があり使えず、
後者は absolute でレイアウトを調整する必要があり
表示サイズや要素サイズによって表示が崩れたりするのであまりやりたくありません

これ以外にも実現方法があれば教えていただけるとありがたいです
CSS で親をたどれたら楽だったんですが…

またCSSだけで不可能な場合JSを使う必要があるとしてどの部分にJSをかくのが一番きれいでしょうか

サンプルコード

まだコードは書いてない状態でどう実装しようか考えてるところなのでサンプルをかいてみました
下側のラジオボタンを非表示disabeldにして
label クリック時に２つのラジオボタンをクローンのように同時に変更できれば実現できるかなと思ったのですが…
これはもちろん手動で変更しないとコンテンツは切り替わりません

<style>
.tab-pane-radio {
  // display:none; // 本当は非表示
}
.tab-pane-radio:not(:checked) + * {
  display:none;
}
</style>
<div>
<input type="radio" name="tab" value="circle" id="tab_circle"><label for="tab_circle">ラベル</label>
</div>
<div>
<input type="radio" name="tab" value="rect" id="tab_circle"><label for="tab_rect">ラベル</label>
</div>
<input type="radio" name="content" value="circle" id="content_circle" class="tab-pane-radio">
<div>circle 入力フォーム</div>
<input type="radio" name="content" value="rect" id="content_rect" class="tab-pane-radio">
<div>rect 入力フォーム</div>

yambejp

2019/03/06 04:51

抽象的なのでもうすこし具体的に提示できませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

tabとcontentのラジオボタンを連携したいということでしょうか？
そもそもtabのラジオボタンはいるのですか？

CSS
1<style>
2[name=content]{display:none}
3[name=content]:not(:checked)+div{display:none}
4</style>
5<label for="content_circle">circle</label>
6<label for="content_rect">rect</label>
7<hr>
8<input type="radio" name="content" value="circle" id="content_circle" class="tab-pane-radio">
9<div>circle 入力フォーム</div>
10<input type="radio" name="content" value="rect" id="content_rect" class="tab-pane-radio">
11<div>rect 入力フォーム</div>

js

javascript
1<style>
2[name=content]:not(:checked)+div{display:none}
3</style>
4<script>
5window.addEventListener('DOMContentLoaded', function(e){
6  [].forEach.call(document.querySelectorAll('[name=tab]'),function(x){
7    x.addEventListener('change',function(e){
8      [].forEach.call(document.querySelectorAll('[name=content]'),function(x){
9        x.checked=e.target.value==x.value;
10      });
11    });
12  });
13});
14</script>
15<label><input type="radio" name="tab" value="circle">circle</label>
16<label><input type="radio" name="tab" value="rect">rect</label>
17<hr>
18<input type="radio" name="content" value="circle" id="content_circle" class="tab-pane-radio">
19<div>circle 入力フォーム</div>
20<input type="radio" name="content" value="rect" id="content_rect" class="tab-pane-radio">
21<div>rect 入力フォーム</div>

ラジオボタンを使い回すCSS

CSS
1<style>
2.content{display:none}
3[name=tab]{display:none;}
4#tab_circle:checked ~ * .tab[for=tab_circle]{color:red}
5#tab_rect:checked ~ * .tab[for=tab_rect]{color:red}
6#tab_circle:checked ~ * .content[for=tab_circle]{display:block;}
7#tab_rect:checked ~ * .content[for=tab_rect]{display:block;}
8</style>
9<body>
10<input type="radio" name="tab" id="tab_circle" value="circle">
11<input type="radio" name="tab" id="tab_rect" value="rect">
12<div>
13<label for="tab_circle" class="tab">circle</label>
14<label for="tab_rect" class="tab">rect</label>
15</div>
16<hr>
17<div>
18<div id="content_circle" for="tab_circle" class="content">circle 入力フォーム</div>
19<div id="content_rect"   for="tab_rect"   class="content">rect 入力フォーム</div>
20</div>
21<hr>
22<div>
23<label for="tab_circle" class="tab">circle</label>
24<label for="tab_rect" class="tab">rect</label>
25</div>
26</body>
27

投稿2019/03/06 05:52

編集2019/03/06 10:40

yambejp

総合スコア114736

退会済みユーザー

2019/03/06 08:27 編集

＞そもそもtabのラジオボタンはいるのですか？要件に（UI表示はラジオボタンのまま）とかいたとおり必要です UIをタブにしてしまうと裏に非表示になっているだけで存在していて非選択時の内容も送信されると誤解を招くということみたいで… ラジオボタンにすることで非選択の内容は明確に「存在しない」ということを強調したいようですなので１つ目の方法はラベル側の表示をCSSのみで変化させることができないので使えないです下側のラジオボタンは表示切り替えのために無理やりおいたものでJSを使うのであればそもそも必要なくてパネルに直接 circle とか rect とかIDをふっておいて $("#" + $(this).val()).show(); $("#" + $(this).val()).siblings().hide(); とかすればいいのですがシステム全体でJSが大きくなりすぎて予期せぬ挙動に悩まされ続けてるのでなるべくJSを使わずにできないかというのが質問の意図でした…

yambejp

2019/03/06 10:42 編集

jsを利用せずに1クリックで2箇所のラジオボタンにチェックを入れることはできませんラジオボタンをなるべくトップレベルにおいて、そことの相対関係で処理を入れるくらいですかね・・・追記してしましたが、質問者さんのやっていることは不毛なので CSSにこだわりすぎるのはやめたほうが良いと思います（少なくとも自力でやる気がないなら）

退会済みユーザー

2019/03/06 10:47

>jsを利用せずに1クリックで2箇所のラジオボタンにチェックを入れることはできませんやはりそうですよね… ＞ラジオボタンをなるべくトップレベルにおいてそれができればよかったんですけど見栄えを統一するために form 部品には bootstrap のスタイルをあてる必要があるのでどうしても１段 div の中に入れる必要があっておとなしくJSを使うことにします何度も回答いただいてありがとうございました＞質問者さんのやっていることは不毛全くそのとおりでできないことがわかるだけでも悩まなくて先にすすめるので助かります

yambejp

2019/03/06 11:02

cssで:hasが使えればやりようがあるんですけどね何かのなかに入ってしまうといまのところ手立てがありません

行動規範の内容に同意します