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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

2回答

1887閲覧

django BOOTSTRAPのラジオボタンの表示方法

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

1グッド

0クリップ

投稿2019/11/01 04:33

編集2022/01/12 10:55

お世話になります。最初に実装したいイメージを以下に示します。

#やりたいこと

イメージ説明

ラジオボタンを上記写真のように実装したいです。複数のカテゴリ(300個位あるのでfor文で回す)を表示させたいです。htmlでは実装できたのですがdjangoでの実装ができず困っております。

#ためしたこと

ラジオボタンを装飾したくBOOTSTRAPを利用し以下のようにつくりました。

<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-light active"> <input type="radio" name="options" id="option1" autocomplete="off" checked>RadioA </label> <label class="btn btn-light"> <input type="radio" name="options" id="option2" autocomplete="off">RadioB </label> </div>

イメージ説明

このコードを実装する事で上記写真のように、アクティブとそうでないラジオボタンを色味を変えてわかりやすく切り替える事ができました。
しかしdjangoに応用しようとした場合以下のように{{ form.category }}と一行で表示してしまうためBOOTSTRAPの切り替え表示ができません。

参考サイト
https://arakan-pgm-ai.hatenablog.com/entry/2019/02/18/090000

#テンプレート

<div class="dummy">   {{ form.category }} </div>

例えばカテゴリデータには以下のようなカテゴリがあるとします。
カテゴリ

 カテゴリ1
カテゴリ2
カテゴリ3

参考までにカテゴリを指定しているformsの中身は以下です。
#form

category = forms.ModelChoiceField(label='category', queryset=Category.objects.annotate(count=Count('user', filter=Q(user__is_user=True))),required=False,widget=forms.RadioSelect, empty_label='all')

このカテゴリをどのように設定すれば上記写真のラジオボタンのようにアクティブと非アクティブを切り替えて表示する事ができますか?
{{ form.category }}と1文となっておりviewsまたはform.pyにどのように記載すればいいのかわかりません。
宜しくお願いします。

退会済みユーザー👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

Djangoで同様の問題にぶち当たった時、radioボタンをdivで囲ってなんとかCSSやJSで適用させました。

なんかFormの属性とかでクラス名を付与できる・・・?とかも聞いたことがありますけどやりかたはよくわかりません()

その時のコード(そのまま使っても動かないと思います)

HTML

1<div class="area radio radio-checked-1"> 2 {% for radio in field %} 3 {{ radio }} 4 {% endfor %} 5</div> 6

JS

1 $('input').on('click', function() { 2 let target_labels = $(this).closest('.area ').children('label'); 3 let click_input_index = target_labels.index($(this).parent('label')); 4 let add_element_area = $(this).closest('.area '); 5 if(click_input_index == 0) { 6 add_element_area.addClass('radio-checked-1'); 7 add_element_area.removeClass('radio-checked-2'); 8 }else{ 9 add_element_area.addClass('radio-checked-2'); 10 add_element_area.removeClass('radio-checked-1'); 11 } 12 });

CSS

1.area input { 2 display: none; 3} 4.area radio label { 5 position:relative; 6 margin-right: 50px; 7} 8.area .radio label::before{ 9 content: ""; 10 display: block; 11 position: absolute; 12 top: 0; 13 left: 0; 14 border-radius: 50%; 15} 16.area .radio.radio-checked-1 label:nth-of-type(1)::after, 17.area .radio.radio-checked-2 label:nth-of-type(2)::after { 18 content: ""; 19 display: block; 20 position: absolute; 21 top: 10px; 22 left: 10px; 23 border-radius: 50%; 24}

ちなみにご存知かもしれませんが {{form.項目名.value}} とやればformの値だけが取れるので、
その取った値を使って実装するほうが普通のJS処理と変わらなくて簡単かもしれません。

投稿2019/11/01 05:25

azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

と記載すれば、似たような見た目になるはずです。labelタグが1階層増えますが。

<div class="btn-group btn-group-toggle" data-toggle="buttons"> {% for r in form.category %} <label class="btn btn-light active"> {{ r}} </label> {% endfor %} </div>

もし、もっと細かくタグの中身を指定したい場合は、いっそModelChoiceFieldを使うのはやめて、普通にCategoryそのものを渡して、view側で頑張るべきです。

Djangoのformは自分でhtmlを書かずに済むように自動生成してくれるのであり、
タグの中身や階層を細かく厳密に決めたい時に使うようなものではないからです。

ちなみにクラスを含めた属性の値を設定したい場合は、以下のようにRadioSelectクラスに引数として
渡してあげればできます。但し、設定される属性はinputタグのほうにだけです。

Python

1 category = forms.ModelChoiceField(label='category', queryset=Category.objects.annotate(count=Count('user', filter=Q(user__is_user=True))),required=False,widget=forms.RadioSelect(attr={"class":"hogeClass"}), empty_label='all')

投稿2019/11/01 08:10

編集2019/11/01 08:16
LineOfLightning

総合スコア253

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/11/01 10:10 編集

ありがとうございます。教えて頂いたコードだとカテゴリをラジオボタンを押しても絞り込みがされませんでした。以下のようにlabelを外しても例えば「カテゴリ1」のラジオボタンをクリックしても、カテゴリ1のデータに絞られない状態です。クリックしてもデータ取得でグルグルと回らず反応がないイメージです。 <div class="radio-label"> {% for r in form.category %} {{ r }} {% endfor %} </div> <div class="radio-label"> {{ form.category }} </div> 上記だと正しくカテゴリが絞られます。もう少しで出来るのにめちゃめちゃ悔しいです。宜しくお願いします。
LineOfLightning

2019/11/05 02:06

絞り込みされないというのは具体的に提示されたソースのどの項目のことでしょうか?もし、提示されたソースにはない部分の項目のことについてや、提示されていないJavascriptの処理で絞り込みを行われているのであれば、まず、提示してください。提示されなければわかるわけがありません。 また、最初にどのボタンにもactiveが付与されていない等については、別の処理で設定する必要があります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問