Python+Dash复选框全选反向联动：自动勾选/取消全选框功能实现咨询

以下是修改后可直接在Google Colab运行的完整代码，新增了子复选框和全选框的双向联动逻辑：

!pip install jupyter-dash

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash import callback_context

# 构建应用
app = JupyterDash(__name__)
app.layout = html.Div(
    [
        dcc.Checklist(
            id="all-or-none",
            options=[{"label": "Select All", "value": "All"}],
            value=[],
            labelStyle={"display": "inline-block"},
        ),
        dcc.Checklist(
            id="my-checklist",
            options=[
                {"label": "New York City", "value": "NYC"},
                {"label": "Montréal", "value": "MTL"},
                {"label": "San Francisco", "value": "SF"},
            ],
            value=[],
            labelStyle={"display": "inline-block"},
        ),
    ]
)

@app.callback(
    [Output("my-checklist", "value"),
     Output("all-or-none", "value")],
    [Input("all-or-none", "value"),
     Input("my-checklist", "value")],
    [State("my-checklist", "options")],
    prevent_initial_call=False
)
def update_checklists(all_selected, child_selected, options):
    ctx = callback_context
    # 获取触发回调的组件ID
    trigger_id = ctx.triggered[0]['prop_id'].split('.')[0]
    all_child_values = [option["value"] for option in options]

    # 全选框触发回调，控制子复选框状态
    if trigger_id == "all-or-none":
        if all_selected:
            return all_child_values, ["All"]
        else:
            return [], []
    # 子复选框触发回调，同步全选框状态
    elif trigger_id == "my-checklist":
        if set(child_selected) == set(all_child_values):
            return child_selected, ["All"]
        else:
            return child_selected, []

# 运行应用，在笔记本内嵌入展示
app.run_server(mode='inline')

核心修改说明 #

• 新增callback_context工具导入，用于识别回调的触发组件，避免双向绑定出现循环调用问题
• 将原有的单输出回调调整为双输出，同时控制子复选框和全选框的选中状态
• 新增子复选框值变化的判断逻辑：当所有子项被手动全部勾选时自动勾选全选框，任意子项取消勾选时自动取消全选框的选中状态

内容的提问来源于stack exchange，提问作者holly_guacamole