質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

1つのクリック時に複数のフォーム部品を変更したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 200
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2019/03/06 13:51

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

    キャンセル

回答 1

checkベストアンサー

+1

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

<style>
[name=content]{display:none}
[name=content]:not(:checked)+div{display:none}
</style>
<label for="content_circle">circle</label>
<label for="content_rect">rect</label>
<hr>
<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>

js

<style>
[name=content]:not(:checked)+div{display:none}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('[name=tab]'),function(x){
    x.addEventListener('change',function(e){
      [].forEach.call(document.querySelectorAll('[name=content]'),function(x){
        x.checked=e.target.value==x.value;
      });
    });
  });
});
</script>
<label><input type="radio" name="tab" value="circle">circle</label>
<label><input type="radio" name="tab" value="rect">rect</label>
<hr>
<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>

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

<style>
.content{display:none}
[name=tab]{display:none;}
#tab_circle:checked ~ * .tab[for=tab_circle]{color:red}
#tab_rect:checked ~ * .tab[for=tab_rect]{color:red}
#tab_circle:checked ~ * .content[for=tab_circle]{display:block;}
#tab_rect:checked ~ * .content[for=tab_rect]{display:block;}
</style>
<body>
<input type="radio" name="tab" id="tab_circle" value="circle">
<input type="radio" name="tab" id="tab_rect" value="rect">
<div>
<label for="tab_circle" class="tab">circle</label>
<label for="tab_rect" class="tab">rect</label>
</div>
<hr>
<div>
<div id="content_circle" for="tab_circle" class="content">circle 入力フォーム</div>
<div id="content_rect"   for="tab_rect"   class="content">rect 入力フォーム</div>
</div>
<hr>
<div>
<label for="tab_circle" class="tab">circle</label>
<label for="tab_rect" class="tab">rect</label>
</div>
</body>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/06 17:24 編集

    >そもそもtabのラジオボタンはいるのですか?
    要件に(UI表示はラジオボタンのまま)とかいたとおり必要です
    UIをタブにしてしまうと裏に非表示になっているだけで存在していて
    非選択時の内容も送信されると誤解を招くということみたいで…
    ラジオボタンにすることで非選択の内容は明確に「存在しない」ということを強調したいようです
    なので1つ目の方法はラベル側の表示をCSSのみで変化させることができないので使えないです

    下側のラジオボタンは表示切り替えのために無理やりおいたものでJSを使うのであればそもそも必要なくて
    パネルに直接 circle とか rect とかIDをふっておいて
    $("#" + $(this).val()).show(); $("#" + $(this).val()).siblings().hide(); とかすればいいのですが
    システム全体でJSが大きくなりすぎて予期せぬ挙動に悩まされ続けてるので
    なるべくJSを使わずにできないかというのが質問の意図でした…

    キャンセル

  • 2019/03/06 19:39 編集

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

    キャンセル

  • 2019/03/06 19:47

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

    キャンセル

  • 2019/03/06 20:02

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る