Make two identical checkboxes by linking them

Is it possible to make two sets of identical checkboxes? So if I select option 1 in one set one, set two’s option 1 is also selected, and vice versa. A very simple mirrored or duplicated element.

dcc.Checklist(id='check_1',
              options=['New York City', 'Montréal', 'San Francisco'],
              value=[]
              ),
dcc.Checklist(id='check_2',
              options=['New York City', 'Montréal', 'San Francisco'],
              value=[]
              ),

In this callback:

@app.callback(
    Output('check_1', 'value'),
    Input('check_2', 'value'),
)
def feature_summary_plot_control(check_2):
    return check_2

@app.callback(
    Output('check_2', 'value'),
    Input('check_1', 'value'),
)
def feature_summary_plot_control(check_1):
    return check_1

I got an error about Dependency Cycle Found. Having one callback was fine, however. Is there perhaps an easier approach to this problem?

hi @Peilin
Can you try to use this example in the docs of circular callbacks?
Try to replace the dcc.Input and dcc.Slider with the two dcc.Checklist you have.

1 Like

Great stuff! Thanks for the swift reply. Got it working using that method, the callback looks like the following in case if anyone else wonders.

@app.callback(
    Output('check_1', 'value'),
    Output('check_2', 'value'),
    Input('check_1', 'value'),
    Input('check_2', 'value'),
)
def feature_summary_plot_control(check_1, check_2):
    trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]
    value = check_1 if trigger_id == "check_1" else check_2
    return value, value