如何用迭代方式在Python Tkinter中实现1-12乘法练习复选框

下面针对两种常见开发场景，给出直接可用的迭代生成方案：

Python Tkinter 桌面端方案 #

用for循环遍历1到12的数字，动态创建复选框并统一管理选中状态，解决手动创建重复控件的问题：

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("乘法练习数字选择")

# 用字典存每个数字的选中状态，避免变量被垃圾回收
selected_nums = {}

# 迭代生成1-12的复选框
for num in range(1, 13):
    var = tk.BooleanVar()
    selected_nums[num] = var
    cb = ttk.Checkbutton(root, text=str(num), variable=var)
    cb.pack(side=tk.LEFT, padx=5, pady=10)

# 获取选中数字的示例函数
def confirm_selection():
    selected = [num for num, var in selected_nums.items() if var.get()]
    print("你选中的练习数字：", selected)

ttk.Button(root, text="确认选择", command=confirm_selection).pack(pady=10)

root.mainloop()

之前从列表创建失败，大概率是没妥善存储复选框的状态变量（比如循环里的var没存到字典/列表中，导致变量被回收，复选框状态异常），这个方案用字典存每个数字对应的BooleanVar，完美解决这个问题。

Web 前端（HTML+JS）方案 #

通过JavaScript循环生成复选框DOM元素，插入到页面容器中，无需手动编写12组重复的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>乘法练习数字选择</title>
</head>
<body>
    <div id="cb-container"></div>
    <button onclick="getSelected()">确认选择</button>

    <script>
        const container = document.getElementById('cb-container');
        // 循环生成1-12的复选框
        for (let i = 1; i <= 12; i++) {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.value = i;
            checkbox.id = `num-${i}`;

            const label = document.createElement('label');
            label.htmlFor = `num-${i}`;
            label.textContent = i;

            // 把复选框和标签插入容器
            container.appendChild(checkbox);
            container.appendChild(label);
            container.appendChild(document.createTextNode(' '));
        }

        // 获取选中数字的函数
        function getSelected() {
            const checkedCbs = document.querySelectorAll('#cb-container input:checked');
            const selectedNums = Array.from(checkedCbs).map(cb => cb.value);
            console.log("选中的练习数字：", selectedNums);
        }
    </script>
</body>
</html>

如果之前用列表生成失败，可能是没正确将生成的DOM元素添加到页面中，这个方案明确把每个生成的复选框和标签插入到指定容器，确保元素能正常显示。

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