前提・実現したいこと
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 クリック時に2つのラジオボタンをクローンのように同時に変更できれば実現できるかなと思ったのですが…
これはもちろん手動で変更しないとコンテンツは切り替わりません
<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>
回答1件
あなたの回答
tips
プレビュー