Dash㊱（Checklistコンポーネント）

Checklistコンポーネント

前回はRadioItemコンポーネントの動作を確認しましたが、今回はChecklistコンポーネントの動作を確認していきます。

実装方法は、RadioItemコンポーネントとほとんど同じで、RadioItemクラスをChecklistクラスに変更するだけです。（11行目）

初期値のvalueには、リスト型のデータのみ設定できます。（18行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.Br(),
        dcc.Checklist(id='checklist1',
            options=[
                {'label':'愛媛', 'value':'ehime'},
                {'label':'香川', 'value':'kagawa'},
                {'label':'徳島', 'value':'tokushima'},
                {'label':'高知', 'value':'kouchi'}
            ],
            value=['ehime', 'kouchi'],      # 複数選択のみ
        ),
        html.Br(),
        html.Div(id='div1')
    ],
    style={'width':'80%', 'margin':'auto'}
)

# コールバック
@app.callback(
    Output('div1', 'children'),
    Input('checklist1', 'value')
)
def change_img(checklist1):
    return '選択しているのは"{}"です'.format(checklist1)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

[ブラウザで表示]

未選択の項目をクリックすると選択済み項目となり、選択済みの項目をクリックすると選択が解除されることが確認できます。