基于Knockout动态创建Observable并按Div ID独立展示的实现

核心思路是给每个循环生成的Div（区域）创建独立的视图模型实例，每个实例维护自己的选中数量Observable，避免共用同一个状态。

1. 定义区域视图模型 #

每个区域拥有独立的选中数量Observable，以及自身的选项集合（根据业务调整）：

function SectionViewModel(sectionId) {
    this.sectionId = sectionId;
    // 独立的选中数量Observable
    this.selectedCount = ko.observable(0);
    // 该区域的复选框选项
    this.checkboxOptions = ko.observableArray([
        { label: "选项A", isChecked: ko.observable(false) },
        { label: "选项B", isChecked: ko.observable(false) },
        { label: "选项C", isChecked: ko.observable(false) }
    ]);

    // 用计算属性自动统计选中数量，无需手动jQuery统计
    this.selectedCount = ko.pureComputed(() => {
        return this.checkboxOptions().filter(opt => opt.isChecked()).length;
    }, this);
}

2. 主视图模型管理所有区域 #

主ViewModel负责维护所有区域的集合，支持动态添加区域：

function MainViewModel() {
    this.sections = ko.observableArray([
        new SectionViewModel("dynamic-id-1"),
        new SectionViewModel("dynamic-id-2"),
        // 可根据需求动态添加更多区域
    ]);

    // 动态添加区域的方法（按需使用）
    this.addNewSection = (newId) => {
        this.sections.push(new SectionViewModel(newId));
    };
}

// 绑定ViewModel
ko.applyBindings(new MainViewModel());

3. 前端模板绑定 #

通过foreach循环渲染每个区域，绑定各自的selectedCount和复选框状态：

<!-- 循环渲染所有区域 -->
<div data-bind="foreach: sections">
    <!-- 每个区域的容器，使用dynamicId -->
    <div data-bind="attr: { id: sectionId }">
        <!-- 渲染该区域的所有复选框 -->
        <div data-bind="foreach: checkboxOptions">
            <label>
                <input type="checkbox" data-bind="checked: isChecked" />
                <span data-bind="text: label"></span>
            </label>
        </div>
        <!-- 对应区域的提示，绑定独立的selectedCount -->
        <span data-bind="text: '已选中 ' + selectedCount() + ' 个'"></span>
        <!-- 可选：数量超过2时的提示 -->
        <span data-bind="visible: selectedCount() > 2, text: '选中数量已超过2个'"></span>
    </div>
</div>

4. 兼容原有jQuery统计逻辑（可选） #

如果必须保留原有jQuery统计的方式，可通过事件绑定更新对应区域的Observable：

<div data-bind="foreach: sections">
    <div data-bind="attr: { id: sectionId }">
        <input type="checkbox" data-bind="event: { change: $parent.updateSectionCount }" />
        <span data-bind="text: '已选中 ' + selectedCount() + ' 个'"></span>
    </div>
</div>

对应的主ViewModel方法：

function MainViewModel() {
    // ... 其他代码 ...

    this.updateSectionCount = (section, event) => {
        // 统计当前区域内选中的复选框数量
        const count = $(`#${section.sectionId} input[type="checkbox"]:checked`).length;
        // 更新当前区域的selectedCount
        section.selectedCount(count);
    };
}

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